http://webpack.github.io/docs/tutorials/getting-started/
1.安裝
$ npm install webpack -g
(1)開始
entry.js
document.write("It works.");
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
運(yùn)行命令打包后，直接可以用了
$ webpack ./entry.js bundle.js
（2）進(jìn)階
添加content.js
module.exports = "It works from content.js.";
修改entry.js
document.write(require("./content.js"));
執(zhí)行命令
$ webpack ./entry.js bundle.js
(3)Loader使用
webpack 僅能處理原生js，需要用css loader處理css文件
npm install css-loader style-loader --saveDev
添加css文件
body {
background: yellow;
}
跟新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"))
注意：require("!style!css!./style.css");有點(diǎn)長(zhǎng)
修改
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
運(yùn)行
webpack ./entry.js bundle.js --module-bind 'css=style!css'
(4)配置文件的使用
添加webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
執(zhí)行打包命令
webpack
（5）優(yōu)化
--progress --colors 用于監(jiān)控進(jìn)度
--watch 用于監(jiān)控變化
webpack --progress --colors --watch
服務(wù)端端webpack啟動(dòng)
npm install webpack-dev-server -g
啟動(dòng)
webpack-dev-server --progress --colors
2.常見配置項(xiàng)
var config = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
resolve: {
alias: {}
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
},
module: {
noParse: [],
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}, {
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.less$/,
loader: 'style!css!less'
}]
}
};
alias
用來告訴webpack，當(dāng)引入react時(shí)，試圖去匹配壓縮過的react；
noParse
當(dāng)webpack嘗試去解析壓縮文件時(shí)，這種行為是不允許的。
resolve:{
extentions:["","js"]//當(dāng)requrie的模塊找不到時(shí)，添加這些后綴
},
entry
配置要打包的文件的入口;可以配置多個(gè)入口文件
resolve
配置文件后綴名(extensions)，除了js，還有jsx、coffee等等。alias配置項(xiàng)，可以為常用模塊配置改屬性，可以節(jié)省編譯的搜索時(shí)間。例如：
resolve:{
extensions:['.js','.jsx'],
alias:{
'react':path.join(nodeModulesPath,'react/react.js')
}
}
loader配置項(xiàng)：
test: /\.(js|jsx)$/, //注意是正則表達(dá)式，不要加引號(hào)，匹配要處理的文件
loader: 'eslint-loader', //要使用的loader，"-loader"可以省略
include: [path.resolve(__dirname, "src/app")], //把要處理的目錄包括進(jìn)來
exclude: [nodeModulesPath] //排除不處理的目錄
plugins
顧名思義，就是配置要使用的插件。plugin是比loader功能更強(qiáng)大的插件，能使用更多的wepack api。來看一個(gè)使用plugin的例子：
plugins: [
//壓縮打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
//允許錯(cuò)誤不打斷程序
new webpack.NoErrorsPlugin(),
//把指定文件夾xia的文件復(fù)制到指定的目錄
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
]
webpack-dev-server
安裝
npm install webpack-dev-server --save -dev
module.exports = config;
var config = {
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]
},
//Server Configuration options
devServer:{
contentBase: '', //靜態(tài)資源的目錄 相對(duì)路徑,相對(duì)于當(dāng)前路徑 默認(rèn)為當(dāng)前config所在的目錄
devtool: 'eval',
hot: true, //自動(dòng)刷新
inline: true,
port: 3005
},
devtool: 'eval',
output:{
path:buildPath,
filename:"app.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//這個(gè)好像也是必須的，雖然我還沒搞懂它的作用
new webpack.NoErrorsPlugin()
]
}
運(yùn)行
webpack-dev-server --config webpack-dev-config.js --inline --colors
http://localhost:3000/index.html(根據(jù)配置會(huì)不一樣)
有一點(diǎn)需要聲明，在index.html（引用導(dǎo)出結(jié)果的html文件）里直接引用“app.js”，不要加父級(jí)目錄,因?yàn)榇藭r(shí)app.js在內(nèi)存里與output配置的目錄無關(guān)：
<script type="text/javascript" src="app.js"></script>
