http://webpackdoc.com/usage.html
npm install webpack -g
npm init -y
npm install webpack --save-dev
新建入口文件entry.js
打包入口文件webpack entry.js xxx.js
舉例說明:導(dǎo)出/入其他的模塊 module.exports、require、
webpack默認(rèn)只會處理js,如果使用它處理其它的文件比如html css json等等,需要安裝對應(yīng)的loader,loader就是轉(zhuǎn)換器,他可以把資源從一種形式,轉(zhuǎn)換成另一種形式,最終得到的還是js文件。
處理css文件npm install css-loader style-loader --save-dev
引入css文件 require('style-loader!css-loader!./css.css');
webpack的配置文件是webpack.config.js
module.exports={
entry:'./entry.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.css/,loader:'style-loader!css-loader'}
]
}
};
生成開發(fā)用的服務(wù)器,在文件變化的時候自動打包,刷新頁面
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev //把依賴寫入package.json
webpack-dev-server --inline --hot自動刷新頁面