1、要確保node的版本是否是最新穩定版
2、接着需要packjson.js文件,全部enter掉就好了,默認值就行了
npm init
3、進行全局安裝webpack
npm install -g webpack
4、cmd跳轉到項目的文件夾,安裝webpack
npm install --save-dev webpack
5、接着在項目文件夾接着安裝,css-loader
和 style-loader處理樣式表
npm install --save-dev style-loader css-loader
6、安裝css中圖片的loader和svg的依賴
npm url-loader svg-url-loader --save-dev
7、在項目文件夾新建webpack.config.js,我的內容如下
var webpack = require('webpack');
module.exports = {
entry: __dirname+'/js/entry.js',
output: {
path: __dirname+'/js',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/,loader: 'style-loader!css-loader'},
{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
{test: /\.svg/, loader: 'svg-url-loader'}
]
}
};
8、在項目文件夾下的js文件夾里新建一個entry.js,我的內容如下(測試用的)
require('./../css/style.css'); // 載入 style.css
require('./index.js');//載入自身想要用的js
9、輸出的網頁的內容index.html,如下
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="js/bundle.js"></script> </body> </html>
10、最后在命令行cmd中輸入webpack就可以自動打包了(但是要記得始終要在原始目錄下)