publicPath: 所有资源从这个路径开始查找
resolve： 指定查找的路径
path: webpack内置处理路径的
clean-webpack-plugins:清除某个目录
安装和使用
处理js：
- babel-preset-2015: 转成es5代码
- babel-polyfill: 将es6的方法转es5
代码分割和懒加载
处理css:
- style-loader: 处理style或link标签,有options配置
- css-loader: 处理css样式，直接将css插入style标签中
- file-loader: 处理文件，将css用link的方式引入
- MiniCssExtractPlugin: 打包import 进来的css为一个文件，可以指定路径
- postcss-loader: css 构建工具,自动加前缀，压缩，使用未来css语法
tree-shaking
将未被用到的代码删除
- js: 生成环境
mode: 'production'默认去掉无用代码，且压缩代码 -
css:
- 使用purify-css处理
- glob-all处理多文件
处理资源
-
css 中处理图片
- file-loader： 处理图片
- url-loader: 小于某个值转base64编码
- 压缩图片: img-loader
- 处理字体: file-loader
- 处理第三方库：
- 在一个js文件里引用jquery,但不想script或import；可以使用ProvidePlugin，将jquery注入到文件里
- imports-loader
- html中处理图片: html-loader
处理html
环境搭建
- webpack-dev-server: 本地服务器
- 模块热更新HMR: 不刷新即可更新
- sourceMap: 可以看到未被打包的源文件，方便定位bug
- 区分开发环境和线上环境： 开发环境不需要压缩代码，生成环境需要，所以有必要分开几个config文件
