webpack
webpack有什么优点或者缺点
webpack是模块化打包工具
优点：
— 可以模块化的打包任何资源,适配任何模块系统,适合SPA单页应用的开发
— plugins插件丰富，能做的事情非常多；
— 社区活跃,能为大多数场景找到已有的开源扩展
spa单页面应用（[https://blog.csdn.net/jiang7701037/article/details/93243545](https://blog.csdn.net/jiang7701037/article/details/93243545）
缺点：
— 对初学者不利，调试很难定位问题
— 配置复杂,通过babel编译后的js代码打包后体积过大
webpack自己用的过程中遇到过什么问题，怎么解决的
1 打包速度慢，因为babel-loaders上,babel-loaders非常耗时的语法转换
解决方法：主要就是用include和exclude来包含或者排除范围
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
query:{
presets:["es2015"]
}
}]
}
但是问题来了，其实这样的速度提升并不明显，用include才能明显地提升速度
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
include:/src/,
query:{
presets:["es2015"]
}
}]
}
2 使用babel进行es6转换时,报错：fileSystem.statSync is not a function
解决方法：
如果babel-loader >= 7.0.0 那么webpack >=2.2.0
如果webpack>4.x 则babel-loader >7.0
有什么方法可以避免webpack打出的包太大
1 提取带三方库
使用插件 optimization.splitChunks配置将第三方库分离打包到vendors.js文件中
像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
插件配置
plugins:[
optimization: {
// 找到chunk中共享的模块,取出来生成单独的chunk
splitChunks: {
chunks: "all", // async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
cacheGroups: {
vendors: { // 抽离第三方插件
test: /[\\/]node_modules[\\/]/, // 指定是node_modules下的第三方包
name: "vendors",
priority: -10 // 抽取优先级
},
utilCommon: { // 抽离自定义工具库
name: "common",
minSize: 0, // 将引用模块分离成新代码文件的最小体积
minChunks: 2, // 表示将引用模块如不同文件引用了多少次，才能分离生成新chunk
priority: -20
}
}
},
]
2 代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启 gzip 压缩，优化的效果更明显
3 代码分割
什么是代码分割呢？我们知道，一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说，我们更想要的是只加载当前 UI 的代码，没有点击的部分不加载。
看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。
code split 是不支持 ES6 的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用 ES6 的方式，这时候不管导入是用 CommomJs 还是 AMD，都会失败，而且还不会报错！
当然会踩到这个坑也是因为我刚刚才用 NodeJS，而且一入门就是用 ES6 的风格。除了这个之外，还有一点也要注意，在生产环境的 webpack 配置文件中，要加上 publicPath
output: {
path: xxx,
publicPath: yyy,
filename: 'bundle.js'
}
不然的话，webpack 在加载 chunk 的时候，路径会出错。
4 设置缓存
对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。
那如果缓存设置过长，文件要更新怎么办呢？
打包后的文件名加入了 hash 值
output: {
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'
}
5 对于在开发环境下才有用的东西在打包到生产环境时通通去掉。
项目太大以后，构建速度很慢，用什么方法提速？
1使用HappyPack来加速构建
HappyPack会采用多进程去打包构建，使用方式还是蛮简单的，但并不是支持所有的loader
2 优化构建时的搜索路径
在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地更快
比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目录路径
还可以善于用下resolve alias别名 这个字段来配置
3 不需要打包编译的插件库换成全局<script>标签引入的方式
比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时
可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量
use: [{
loader: 'expose-loader',
options: '/pre>
}, {
loader: 'expose-loader',
options: 'jQuery'
}]
// @2
externals: {
jquery: 'jQuery'
},
// @3
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),</pre>
4热更新热替换
webpack支持监听模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好
注意区分一下开发环境和线上环境，开发环境启用热更新替换
// 开发环境设置本地服务器，实现热更新
devServer: {
contentBase: path.resolve(__dirname, 'static'),
// 提供给外部访问
host: '0.0.0.0',
port: 8388,
// 允许开发服务器访问本地服务器的包JSON文件，防止跨域
headers: {
'Access-Control-Allow-Origin': '*'
},
// 设置热替换
hot: true,
// 设置页面引入
inline: true
},
// 文件输出配置
output: {
// 设置路径，防止访问本地服务器相关资源时，被开发服务器认为是相对其的路径
publicPath: 'http://localhost:8188/dist/js/',
},
// 插件配置
plugins: [
// 热更新替换
new webpack.HotModuleReplacementPlugin()
]
5 babel-loader开启缓存
babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率
可以加上cacheDirectory参数或使用 transform-runtime 插件试试
6使用异步的模块加载
这个算是可以减小模块的体积吧，在一定程度上也是为用户考虑的，使用require.ensure来设置哪些模块需要异步加载，webpack会将它打包到一个独立的chunk中，
在某个时刻（比如用户点击了查看）才异步地加载这个模块来执行
$('.bg-input').click(() => {
console.log('clicked, loading async.js')
require.ensure([], require => {
require('./components/async2').log();
require('./components/async1').log();
console.log('loading async.js done');
});
});
5怎么基于webpack做工程化
1 提高构建速度
— Resolve阶段提速，加快文件查找速度
— loader 执行阶段提速，减少要被 loader 执行的文件数量
2 优化构建输出
— tree-shaking 删除冗余的代码
代码压缩
js 代码压缩
css 代码压缩
—拆包
异步加载
抽出第三方库
