rules: [
        {
            test: /\.js$/,
            loader: ['babel-loader?cacheDirectory'],
            include: srcPath, //設(shè)置include或者exclude的范圍，限定需要編譯文件的目錄范圍
            //exclude: /node_modules/
        }
    ]

    plugins： [
        //忽略moment下的/locale目錄，再手動import locale內(nèi)部我們需要使用到的語言包
        new webpack.IgnorePlugin(/\.\/local/,/moment/)
    ]

module: {
    noParse: [/xx\.min\.js$/]
}

rules: [
    {
        test: /\.js$/,
        //把對.js文件的處理轉(zhuǎn)交給id為babel的HappyPack實(shí)例
        use: ['happypack/loader?id=babel'],
        include: srcPath
    }
],
plugins: [
    new HappyPack({
        //用唯一的標(biāo)識符id來代表當(dāng)前的HappyPack是用來處理一類特定的文件
        id: 'babel',
        //如何處理.js文件，用法和loader配置中一樣
        loaders: ['babel-loader?cacheDirectory']
    })
]

plugins: [
    new ParallelUglifyPlugin({
        //還是使用的UglifyJs壓縮，只不過幫助開啟了多進(jìn)程
        uglifyJS: {
            output: {
                beautify: false,//最緊湊的輸出
                comments: false,//刪除所有的注釋
            },
            compress: {
                //刪除所有的'console'語句，可以兼容ie瀏覽器
                drop_console: true,
                //內(nèi)嵌定義了但只用到一次的變量
                collapse_vars: true,
                //提取出出現(xiàn)多次但是沒定義成變量去引用的靜態(tài)值
                reduce_vars: true
            }
        }
    })
]

entry: {
    index: [
        'webpack-dev-server/client?http://localhost:8080/',
        'webpack/hot/dev-server',
        path.join(srcPath, 'index.js')
    ],
    other: path.join(srcPath, 'other.js')
}

plugins: [
    new HotModuleReplacementPlugin()
]

devServer: {
    xxx: 'xx'
    hot: true //開啟熱更新
}

if(module.hot){
    module.hot.accept(['xxx文件名'], () => {
        //在注冊了熱更新的js文件修改后，才會進(jìn)行熱更新
    })
}

//webpack.dll.js文件中的配置
mode: 'development', 
entry: {
    //把react相關(guān)模塊放到一個(gè)單獨(dú)的動態(tài)鏈接庫
    react: ['react','react-dom']
},
output: {
    //輸出動態(tài)鏈接庫的文件名稱，[name]代表當(dāng)前動態(tài)鏈接庫的名稱
    filename: '[name].dll.js',
    path: distPath,
    //存放動態(tài)鏈接庫的全局變量名稱，例如對應(yīng)react來說就是 _dll_react
    //之所以在前面加上_dll_是為了防止全局變量沖突
    library: '_dll_[name]'
}
plugins: [
    new DllPlugin({
        //動態(tài)鏈接庫的全局變量名稱，需要和output.library中保持一致
        //該字段的值也就是輸出的manifest.json文件中name字段的值
        name: '_dll_[name]',
        path: path.join(distPath, '[name].manifest.json')
    })
]

    "script": {
        "dll": "webpack --config build/webpack.dll.js"
    }

//在inde.html中
<script src="./react.dll.js"></script>
//在webpack.dev.js中
plugins: [
    new DllReferencePlugin({
        //描述react動態(tài)鏈接庫的文件內(nèi)容
        manifest: require(path.join(distPath, 'react.manifest.json'))
    })
]

output: {
    publicPath: 'http://cdn.xxx.com'//引用文件路徑是，路徑名前加cdn域名的前綴
}

mode: "production"

module.exports = {
    resolve: {
        mainFields: ['jsnext: main','browser','main']
    },
    plugins: [
        //開啟Scope Hosting
        new ModuleConcatenationPlugin()
    ]
}