webpack基础：loader和plugin

jojo的奇妙前端
80 阅读2分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

# webpack基础概念简览

1.png 本文demo版本：

"webpack": "^5.62.1",
"webpack-cli": "^4.9.1"

loader

loader是模块解析处理器，能够让webpack认识模块，通过条件匹配，在module.rules里，对符合条件的模块进行转换，比如让webpack认识css

  1. 新建一个css的文件写入样式并引入它 +index.css
body {
  background-color: antiquewhite;
}

app.js

import "./app.css"
console.log("this is app.js");

这个时候打包，发现报错了

111.png

但这是正常的，因为这个时候webpack还不认识css，所以我们要加入css-loader

$ npm i css-loader -D

然后引入它，开篇说了，loader放在module.rules里

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader'],
      }
    ]
  }

里面新增了一个对象，包含test和use，test利用正则匹配.css后缀的文件，use加载css-loader的插件，那么再打包一下，就能成功了

image.png

但如果需要在html中使用它，还需要配置style-loader

$ npm i style-loader -D

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }

[这其中还有个需要注意的是css-loader和style-loader的顺序，style-loader在左，css-loader在右,不然会报错。
原因是loader的解析顺序是从下到上,从右往左。
而编译顺序先用css-loader编译css代码,再用style-loader放入到网页的style标签里面去]

那么，同样的，如果需要使用less，需要让webpack认识它

$ npm i less-loader

  module: {
    rules: [
        {
          test: /\.less$/,
          use: ['style-loader','css-loader','less-loader'],
        }
    ]
  }

plugin

loader也有解决不了的事，而plugin可以解决loader解决不了的问题，像webpack本身就由很多插件组成，因此内置了很多插件，在webpack官网可查看内置插件

例如：TerserWebpackPlugin，该插件使用 terser 来压缩JS

目前用terser-webpack-plugin替换掉uglifyjs-webpack-plugin解决uglifyjs不支持es6语法问题

webpack5自带最新版本terser-webpack-plugin，但如果版本低于5或者需要自定义，那么需要npm一下

$ npm install terser-webpack-plugin --save-dev

然后将插件添加到你的 webpack 配置文件中。例如：

webpack.config.js

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

提问

webpack中loader和plugin的区别是什么？

loader 用于加载某些资源文件，作用于文件上
plugin用于扩展webpack的功能，直接作用于 webpack，功能更丰富，不局限于资源加载

avatar
文章
阅读
粉丝