在項目中使用webpack

1.通過npm init實(shí)例化package.json文件。

2.通過npm install webpack --save-dev安裝webpack到package.json文件中。

2.或者通過npm install webpack@1.2.x --save-dev安裝指定版本的webpack到package.json文件中。

3.通過npm install webpack-dev-server --save-dev安裝dev tools到package.json文件中，本地運(yùn)行webpack服務(wù)。

Webpack的常用的指令

webpack執(zhí)行一次開發(fā)時的編譯

webpack -p執(zhí)行一次生成環(huán)境的編譯（壓縮）

webpack --watch在開發(fā)時持續(xù)監(jiān)控增量編譯（很快）

webpack -d讓他生成SourceMaps

webpack --progress顯示編譯進(jìn)度

webpack --colors顯示靜態(tài)資源的顏色

webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by將modules/chunks/assets進(jìn)行列表排序

webpack --display-chunks展示編譯后的分塊

webpack --display-reasons顯示更多引用模塊原因

webapck --display-error-details顯示更多報錯信息

webpack.config.js 配置文件

基本的代碼

var webpack = require('webpack');

module.exports = {//插件項plugins:[//提公用js到common.js文件中newwebpack.optimize.CommonsChunkPlugin('common.js'),//將樣式統(tǒng)一發(fā)布到style.css中newExtractTextPlugin("style.css", {allChunks:true,disable:false}),//使用ProvidePlugin加載使用頻率高的模塊newwebpack.ProvidePlugin({$:"webpack-zepto"})

],//頁面入口文件配置entry:{index :'./src/main.js'},//入口文件輸出配置output:{path:__dirname +'/dist/',filename:'[name].js'},module:{//加載器配置loaders:[

{test:/\.css$/,loader:'style-loader!css-loader'},

{test:/\.scss$/,loader:'style!css!sass?sourceMap'},

{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}

]

},//其它解決方案配置resolve:{extensions:['','.js','.json','.scss'],alias:{filter:path.join(__dirname,'src/filters')

}

}

};