webpack基本配置

一、Webpack基本配置？
1.拆分配置和merge
先定义common公共配置，在定义dev开发环境配置，在定义线上配置production。dev和prod通过webpack-merge工具引进common
公共配置。
2.启动本地服务

二、Webpack跨域怎么解决？
注意配置proxy代理，重写pathRewrite。

三、webpack多入口文件怎么配置？
1.entry入口文件写多个；
2.output里面用对应的变量name制作；
3.plugins里面针对每个入口写HtmlWebpackPlugin的实例，注意配置chunks。

四、Webpack如何压缩？
mini-css-extract-plugin

五、抽离CSS文件？

如何抽离公共代码和第三方代码？

module：各个源码文件，webpack中一切皆模块；
chunk：多模块合并成的，如entry，import（），splitChunk
bundle：最终的输出文件。

六、webpack如何配置热更新？
自动刷新：整个网页全部刷新，速度较慢
自动刷新：整个网页全部刷新，状态会丢失
热更新：新代码生效，网页不刷新，状态不丢失

七、webpack优化构建速度？（可用于生产环境）
优化babel-loader；
a.缓存（只用于开发环境） b.明确使用范围
IgnorePlugin（生产环境）
noParse
HappyPack
ParalleUglifyPlugin（生产环境）
（不可用于生产环境）自动刷新 、热更新、DllPlugin

webpack性能优化-产出代码
体积更小
合理分包，不重复加载
速度更快，内存使用更少

小图片base64编码
bundle加hash
懒加载
提取公共代码
IgnorePlugin
使用CDN加速