webpack 心得

在项目中使用webpack

1.通过npm init实例化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文件中，本地运行webpack服务。

---

Webpack的常用的指令

webpack执行一次开发时的编译

webpack -p执行一次生成环境的编译（压缩）

webpack --watch在开发时持续监控增量编译（很快）

webpack -d让他生成SourceMaps

webpack --progress显示编译进度

webpack --colors显示静态资源的颜色

webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by将modules/chunks/assets进行列表排序

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'),//将样式统一发布到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')

}

}

};