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‘,
    }
//使用别名，对模块请求重定向，据说可以缩短打包时间
},
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&copyto=[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文件打包成独立文件
]
}

webpack配置的说明

标签：

原文地址：http://www.cnblogs.com/liuzhenwei/p/5519763.html