1.安裝webpack
前提得安裝node(https://nodejs.org),官網(wǎng)下載安裝即可苏研。
npm install -g webpack
這樣全局都可以使用webpack命令了
2.使用webpack
新建一個(gè)目錄：webpackdemo,進(jìn)入目錄新建文件：entry.js秋冰，內(nèi)容如下：
document.write('hello webpack world!')
新建index.html:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
當(dāng)前目錄命令行運(yùn)行：
webpack ./entry.js bundle.js
會在此目錄下多出一個(gè)bundle.js文件，此時(shí)瀏覽器打開index.html织咧，就會看到頁面顯示：
hello webpack world!
3.加入樣式
在日常的開發(fā)中，不可能只有JS文件宇葱，我們還需要CSS的配合才能做出好的產(chǎn)品勺良，默認(rèn)情況下webpack只處理JS文件，處理其他文件需要特定的loader花枫。比如：css-loader,style-loader刻盐。
安裝loader：
npm install css-loader style-loader
style.css
body {
background: yellow;
}
更新entry.js:
require('!style!css!./style.css');
document.write('hello webpack world!')
如果引入每個(gè)css文件前面都要加入這么多東西，很繁瑣劳翰，所以我們可以bind：
更改entry.js:
require('./style.css');
document.write('hello webpack world!')
運(yùn)行：
webpack ./entry.js bundle.js --module-bind 'css=style!css'
4.引入配置文件
其實(shí)像上面每次都要運(yùn)行那么多命令敦锌，也是令人頭痛。所以我們引入了webpack的配置文件佳簸，webpack.config.js:
let path = require('path');
module.exports = {
entry:'./app.js',
output:{
path:path.join(__dirname,'/dist/'),
filename:'bundle.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'}
]
}
}
執(zhí)行webpack乙墙，就會生成bundle.js。
4.多入口配置
更改webpack.conf.js內(nèi)容如下：
let path = require('path');
module.exports = {
entry:{
index:'./src/index.js',
common:[//這里就是公共的文件
'./src/common.js',
'./src/common1.js'
]
},
output:{
path:path.join(__dirname,'/dist/'),
filename:'[name].js'//注意這里的name就是上面entry里的key：index，common
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'}
]
}
}
運(yùn)行webpack听想，在dist目錄下就會生成：index.js和common.js腥刹。
5.提取css文件
上面的配置是直接把樣式添加到頁面的，我們需要提取css文件汉买，提取文件需要插件：extract-text-webpack-plugin衔峰。
npm install extract-text-webpack-plugin --save-dev
webpack.config.js更改如下：
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry:{
index:'./src/index/index.js',
list:'./src/list/list.js',
common:[
'./src/common/common.js',
'./src/common/common1.js'
]
},
output:{
path:path.join(__dirname,'/dist/'),
filename:'[name].js'
},
module:{
loaders:[
{
test:/\.css$/,
loader:ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins:[
new ExtractTextPlugin('[name].css')
]
}
運(yùn)行webpack命令，會發(fā)現(xiàn)在dist目錄下多了css文件蛙粘。
