webpack配置的说明
{
devtool: 'source-map',
//要启用source-map需加上此配置项，同时css或less的loader要加上参数?sourceMap，js的loader不用加
entry: entries,
output: {
path: './assets/',
filename: '[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx', '.less', '.css'],
//用于指明程序自动补全识别哪些后缀，注意一下，extensions 第一个是空字符串，对应不需要后缀的情况。
alias: {
'jquery': './js/vendor/jquery',
}
//使用别名，对模块请求重定向，据说可以缩短打包时间
},
externals: {
'./src/html/js/swiper': 'Swiper'
// externals对象的key是给require时用的，比如require('react')，对象的value表示的是如何在global（即window）中访问到该对象，这里是window.React。
},
module: {
loaders: [
{test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel', query: {presets: ['es2015', 'react']}},
//exclude是排除的目录或文件，使用正则
//使用babel做jsx打包，需加上babel-preset-react和babel-preset-es2015这2个npm包，并加上loader参数presets: ['es2015', 'react']
{test: /\.less$/, loader: ExtractTextPlugin.extract(['css?sourceMap!postcss!less?sourceMap'])},
//要使用autoprefixer，需使用postcss，autoprefixer是postcss的一个插件
//要启用sourceMap必须加上参数sourceMap
{test: /\.(eot|ttf)$/, loader: 'copy-file?copyto=[path][name].[ext]&context=' + srcPath},
{test: /\.(jpe?g|png|gif|svg|swf)$/, loader: 'copy-file?limit=10000©to=[path][name].[ext]&context=' + srcPath},
//可以使用copy-file-loader让less中所引用的文件路径在打包成css之后保持不变
]
},
postcss: function(){
return {
defaults: [autoprefixer],
cleaner: [autoprefixer({browsers: ['IE >= 9']})]
};
},
//postcss的相关设置，这里只设了autoprefixer
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//启用代码压缩
new webpack.ProvidePlugin({
'$': 'jquery'
}),
//将模块暴露在window下
new webpack.optimize.CommonsChunkPlugin({
name: ['common'],
minChunks: 2
}),
//将公共模块打包到一个公共文件中
//minChunks的值决定有多少个entry文件调用了相同模块，才打包进公共文件中
new ExtractTextPlugin('[name].css'),
//将css文件打包成独立文件
]
}