上一篇我們提到了當(dāng)我們項目比較復(fù)雜需要打包的文件較多時肠牲，就需要用到我們的webpackconfig.js配置文件肥隆。
webpack.config.js文件創(chuàng)建在我們項目的根目錄下：
//cd 切換到項目目錄下創(chuàng)建配置文件
vim webpack.config.js
項目目錄結(jié)構(gòu):
//一般我們相對簡單的項目使用以下目錄
project demo
./src //項目開發(fā)目錄
../html //html文件目錄
../css //css文件目錄
../js //js文件目錄
./node-modules //項目的依賴模塊文件目錄
./package.json //npm配置文件
./webpack.config.js //webpack配置文件
./dist //項目最終打包分發(fā)目錄
webpack.config.js文件配置:
//文件配置的參數(shù)
entry: 入口文件
output: 打包輸出文件
module-loader：模塊加載器
plugins：插件
先安裝我們所需要的module-loader：
//cd 項目目錄
npm install style-loader css-loader --save-dev
npm install file-loader --save-dev
npm install url-loader --save-dev
npm install babel-loader --save-dev
下面我們來編寫這個文件：
var webpack = require('webpack');
module.exports = {
entry: {
index: './src/js/index.js'
},
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.\css$/, \\匹配css文件
exclude: /node-modules/, \\匹配不包含的目錄
loader: 'style-loader!css-loader',
},
{
test: /.\js$/, \\匹配js文件
exclude: /node-modules/, \\匹配不包含的目錄
loader: 'babel-loader'
},
{
test: /.(png|jpg)$/,
exclude: /node-modules/,
loader: 'url-loader?limit=8192' //limit表示小于8K時自動base64圖片加載器
}
]
},
plugins: [
//插件配置
]
};
以上是簡單的配置牺荠，詳細(xì)請瀏覽官方文檔：Webpack.config配置
//運(yùn)行webpack命令虱朵，-h幫助
webpack //沒有報錯將會在我們制定的目錄看到輸出的文件
webpack --watch //監(jiān)聽文件變化并自動打包
因為我們的index.html文件的目錄發(fā)生了變化蓖康，webpack打包過后原來的html中script src的路徑引用會錯誤蓉坎，需要手動修改或者移動dist目錄肿孵。
下一篇章我們將繼續(xù)學(xué)習(xí)webpack相關(guān)的一些配置唠粥。
