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&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文件打包成獨立文件]}