webpack工具知多少（下篇）

webpack官方文档

1.loader VS Plugin区别

2.loader VS Plugin

loader是加载器，用于加载loder文件的；plugin是插件，用于拓展webpack功能的，loader比如js通过bable loader把js文件转换成低版本浏览器支持的，也可以加载css转换成页面上的style标签和其他，还可以进行图片的优化。

Plugin是用来加强webpack功能的，比如可以用HtmlWebpackPlugin把多个html文件转换成一个HTML文件，用MiniCssExtractPlugin来抽取css代码变成css文件的

3.webpack引入scss(dart-sass)

文件后缀和x.js引用改成2.scss

终端：yarn add sass-loader dart-sass

修改webpack.config.base.js文件的dart配置：

options: {implementation: require(“dart-sass”),},

  module: {
   
    rules: [
      {
   
        test: /\.scss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
   
            loader: "sass-loader",
            options: {
   
              implementation: require("dart-sass"),
            },
          },
        ],
      },
    ],
  },

修改webpack.config.js文件内容，保留内容**…base.module.rules**

  module: {
   
    rules: [
      ...base.module.rules,
      {
   
        test: /\.css$/,
        use: ["style-loader", "css-loader"