wepback的主要优化方式分为很多种，下面介绍一下比较实用的几种方式，在项目中都是可以用到的
- 编译的时候彩色显示进度、时间 好看又装逼
webpack config webpack.config.js --progress --profile --colors
- 设置打包环境变量为producation,可以减小打包后的大小
webpack -p // 会自动将process.env.NODE_ENV 设置为production 同时会使用UglifyJsPlugin
- 设置sourceMap,方便日后debug(可以在控制台soure中看到源文件) 同时应该避免使用inline-和 eval-的devtool选项，因为他们会增打包块的体积
devtool: process.env.NODE_ENV === 'production' ? cheap-module-source-map : cheap-module-eval-source-map,
plugins: [
new webpack.optimize.UglifyJsPlugin({ // webpack3 配置
sourceMap: true
})
// 同时可以通过在output中设置 sourceMapFilename来指定map的位置
// 如果用了extract-text-webpack-plugin插件的话，将devtool选项改成source-map，不然的话css的sourcemap不会生效
- 利用CommonsChunkPlugin抽离公共代码(第三方库等等)，由于第三方库的变动不怎么频繁，因此我们可以抽离为公共代码，缓存在浏览器，这样的话可以减少网络请求，提升速度
entry: {
vendor: ["react", "react-router"] // 定义公共的依赖库
}，
plugins: {
new webpack.optimize.CommonsChunkPlugin({
name: "vendor", // 生成的名字，
async: true // 异步加载公共块只有当需要用的时候才会下载
})
}
- 利用require.context请求某个目录下的所有文件
require.context(string, boolean ,RegExp)
// 第一个参数是目录路径
// 第二个参数是 是否搜索其子目录
// 第三个参数是 匹配文件的正则表达式
importAll(r) {
return r.keys().map(r)
}
importAll(require.context('./test', false, /\.js$/)) // 返回一个包含test文件夹下所有以js结尾的模块的数组
- 利用ExtractTextWebpackPlugin抽离css文件
plugins: [
new ExtractTextPlugin({
filename: '[name].css', // string || function
llChunks: true // boolean
}),
]
- 利用scope hoisting特性减小打包块
plugins：[
new webpack.optimize.ModuleConcatenationPlugin() // 只限于webpack 3.x版本
]
- 如果每次build，我们都会更新hash值，哪怕我们一行代码都没有动过，也会重新生成，意味着用户需要重新下载，没有合理地运用到缓存，我们可以利用chunk-manifest-webpack-plugin webpack-chunk-has来进行缓存，同时这个插件会降低build速度，所以只建议在生产环境中使用
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const config = {
plugins: = [
new WebpackChunkHash(),
new ChunkManifestPlugin({
filename: 'chunk-manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: true,
}),
new HtmlWebpackPlugin({ // 自动在模板文件中生成chunk-manifest.json
inlineManifestWebpackName: 'webpackManifest',
})
}
