webpack 配置小结

开发环境配置小结：

兼容性靠 Loader 实现, 压缩靠 plugin（插件 ） 实现

html文件

•  html-webpack-plugin  创建一个空的 html 并自动引入所有 webpack 打包输出的资源；

  • 再对其进一步配置，做到压缩 html 代码。

less/css 文件的完整处理过程：

0. 通过  less-loader 编译为 css

1. 通过 post-css  做 css 代码的兼容

2. 通过 css-loader将css代码编译到js文件中

3. 通过 style-loader 将css代码插入在html标签中 或通过MiniCssExtractPlugin  插件和MiniCssExtractPlugin.loader  将css 文件提取出来，以 link  标签的形式引入在 index.html  中

4. 通过 OptimizeCssAssetsWebpackPlugin 插件进行代码的压缩

   •  mini-css-extract-plugin 将 js 中的 css 模块提取成单独的一个文件；
   • optimize-css-assets-webpack-plugin  压缩 css；
   • optimize-css-assets-webpack-plugin  压缩 css；

js文件的完整处理过程

0. 通过eslint-webpack-plugin  插件进行代码格式的检验
1. 通过 babel 进行兼容性处理

• 注意：eslint  应在  babel 之前进行处理。如果 babel 先对 js 代码进行了转换，那可能在通过   Eslint检查的时候会报错。所以应该先通过 Eslint进行语法检查，然后再通过  babel 做语法兼容。

  •  eslint-loader  做语法检查（还需下载 eslint 、 eslint-config-airbnb-base、eslint-plugin-import eslint ，在 package.json 中配置eslintConfig 字段）

3. 通过  mode="production"  对代码进行压缩
4.  babel-loader  处理 js 兼容性

• babel-loader + @babel/core + @babel/preset-env ：只能处理 ES6+  语法问题。

• babel-loader + @babel/core + @babel/preset-env + @babel/polyfill：以非按需加载的方式处理js全部兼容性问题。

• babel-loader + @babel/core + @babel/preset-env + 配置： 以按需加载的方式处理 js 全部兼容性问题（推荐） 。

图片文件的完整处理过程：

0. 对于在 css 中通过  background-image 引入的图片，需要使用url-loader进行处理

1. 对于在html中直接引入的 img，直接使用 html-loader 处理

   • url-loader 处理 css 中的图片资源（img 标签除外）（还需下载file-loader ） 。
   • 针对img标签：html-loader 处理 html 文件的 img 图片，从而能被 url-loader 处理；
2. • html文件的完整处理过程：
   • 通过  HtmlWebpackPlugin 插件实现：
   • 引入  index.html模版
   • 打包
   • 代码压缩

其他文件的处理：

• 使用  file-loader进行处理

​