什么是 loader？什么是 plugin？

什么是 loader？有哪些常见的 loader？怎么配置 loader？

• Webpack 本身只能处理 Javascript、json 等资源，其他资源需要借助 loader（加载器），webpack 才能解析。
• 常见的 loader 有：
  ○ babel-loader：处理 ES6 的 loader；
  ○ css-loader：处理 CSS 的 loader；
  ○ style-loader：将 CSS 插入到 HTML 页面中的 <style> 标签的 loader；
  ○ less-loader：处理 less 的 loader；
  ○ file-loader：处理文件的 loader；
  ○ url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
  ○ source-map-loader：加载额外的 Source Map 文件，以方便断点调试
  ○ image-loader：加载并且压缩图片文件
  ○ eslint-loader：通过 ESLint 检查 JavaScript 代码
• loader 配置步骤：
  ○ npm 下载对应的 loader
  ○ 在 module 选项里配置 rules，每个 rule 是个对象，用来表示对一个文件的处理规则；test 表示要处理的文件，use 里可以通过配置多个 loader 来处理。
  ○ 要注意 loader 的执行顺序为：从下到上，从右到左。

  module.exports = {
      // loader
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                },
              },
              { loader: 'sass-loader' },
            ],
          },
        ],
      },
  };
  

什么是 plugin？有哪些常见的 plugin？怎么配置 plugin？

• plugin（插件）是 webpack 中的扩展器，在 webpack 运行的生命周期中，会广播出许多钩子事件，plugin 可以监听这些事件，并挂载自己的任务，也就是注册事件。当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
• plugin 是对 webpack 功能的扩展和增强，可以帮助我们在打包过程中自动执行一些额外的操作，比如生成 HTML 文件、压缩代码、提取 CSS 等。
• 常见的 plugin：
  ○ define-plugin：定义环境变量，可以在代码中直接使用
  ○ html-webpack-plugin：根据模板生成 HTML 文件，可以自动引入打包后的资源
  ○ uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
  ○ webpack-parallel-uglify-plugin：多核压缩，提高压缩速度
  ○ webpack-bundle-analyzer：可视化 webpack 输出文件的体积
  ○ mini-css-extract-plugin：CSS 提取到单独的文件中，支持按需加载
• plugin 配置步骤：
  ○ npm 下载要用的 plugin
  ○ 在 plugins 选项里配置 plugin，每个 plugin 是一个类，new 这个类，然后可以根据文档和需求配置 option

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
   // ...其他配置
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
   ]
  }