webpack总结

1、webpack基本配置项

mode：环境名称，development/production

output：输出文件结果，可在文件后缀前加上hash值，作为浏览器缓存。

entry：程序入口

plugin：插件

loader：第三方插件

把公共的部分放在webpack.common.js中，开发和生产环境的配置另外放。

2、高级配置

2-1、构建体验更好的打包环境

        多进程打包，多进程压缩代码

        ignorePlugin/noParse。前者忽略掉指定模块，后者打包时不进行处理，比如已经压缩过的文件。

        sourceMap：设置在浏览器是否能看到源码文件

2-2、优化代码输出

        在输出文件的后缀前加上一串hash，浏览器刷新时根据hash来判断是否走缓存。

        babel。在.babelrc文件中与loader中配置。可以转换ES6的代码为ES5。

        合并指定后缀的文件到对应模块。

        postcss自动添加前缀。考虑浏览器兼容性，给一些css语法自动添加上前缀。比如transform

        图片名修改，图片大小压缩。

        分割代码。把第三方模块和引用超过2次的模块抽离成公共文件，第三方模块优先级更高。