在项目中使用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')
}
}
};
