面试点

什么是 loader

loader 可以让我们的 webpack 处理其他类型的文件，并且让他们转化成有效的模块来供我们应用程序使用 例如： style-loader、css-loader 让 webpack 加载 css 资源，并且将 css 资源放在 html 的 head 里面，除此之外，我们还可以使用 less-loader、sass-loader 来引入 css 预

处理工具 mini-css-extract-plugin 和相应的 loader 来抽离 css 文件

css-mini-mizer-webpack-plugin 来压缩 css 文件

总结：Loader 就是将 Webpack 不认识的内容转化为认识的内容

SourceMap

模式	解释
eval	每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@sourceURL
source-map	生成一个 SourceMap 文件
hidden-source-map	和 source-map 一样，但不会再 bundle 末尾追加注释
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件
eval-source-map	每个 module 会通过 eval()来执行，并且生成一个 DataUrl 形式的 SourceMap
cheap-source-map	生成一个没有列信息(column-mappings)的 SourceMaps 文件，不包含 loader 的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的 SourceMaps 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的

在 mode 为“development”模式下，打包的 sourceMap 默认为 eval，如果想关闭，可以加入 devtool:false

在开发环境中，推荐使用 cheap-module-source-map，它不单可以帮我们生产一个 map 文件，而且它不记录列数，增加效率，同时类似于 babel 这种解析的 source-map 混杂进来以后，也不会导致我们代码行数识别的一个问题

Plugin

与 Loader 用于转换特定类型的文件不同，插件（Plugin）可以贯穿 Webpack 打包的生命周期，执行不同的任务

例如：

1、如果我想打包后的资源文件，例如：js 或者 css 文件可以自动引入到 Html 中，就需要使用插件  html-webpack-plugin 来帮助你完成这个操作

npm install html-webpack-plugin -D

plugins: [
  // 配置插件
  new HtmlWebpackPlugin({
    template: "./src/index.html",
  }),
];

2、每次打包的时候，打包目录都会遗留上次打包的文件，为了保持打包目录的纯净，我们需要在打包前将打包目录清空，这里我们可以使用插件  clean-webpack-plugin  来实现

npm install clean-webpack-plugin -D

plugins: [
  // 配置插件
  new CleanWebpackPlugin(), // 引入插件
];