这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

webpack5

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

安装

我们可以在命令行直接全局安装webpack，webpack-cli。

命令:

 npm install webpack webpack-cli –g

然后在我们想要打包的项目文件下，执行webpack命令，即可对src/index.js的文件作为入口，进行打包。

*注意：*所有打包的文件，都需要从index.js入口文件，寻找到依赖的文件，如果文件没有被导入引用，那么该文件不会被打包。

由于当多个项目使用全局webpack时，可能出现版本不统一，导致兼容性问题。因此我们一般在项目中会使用局部的webpack。

项目中安装webpack:

 npm install webpack webpack-cli –D

配置webpack

webpack的默认配置是不能满足我们复杂的项目的，因此webpack允许我们在项目的根目录下建一个webpack.config.js文件，用于配置webpack。

 const path = require("path");
 ​
 module.exports = {
    //入口文件
   entry: "./src/index.js",
     //打包后的导出文件
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "./dist"),
   },
 };

我们也可以修改配置文件名，此时，我们就需要在package.json文件中配置运行命令，来识别自定义的配置文件名。

如果我们webpack配置文件名为wk.js，那么我们需要在package.json中进行如下配置。

   "scripts": {
     "build": "webpack --config wk.js"
   },

loader

在我们的项目中，除了js文件，我们会有非常多的文件类型，当时webpack默认是不能处理其他的文件类型的。如果要处理其他文件类型，我们需要使用loader对文件进行处理，之后webapck才能正确的打包。

处理.css文件

安装css-loader，用于解析css文件。

安装style-loader，用于将解析后的css插入的页面当中。

 npm install css-loader -D
 npm install style-loader -D

配置webpack：

 const path = require("path");
 ​
 module.exports = {
   entry: "./src/index.js",
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "./dist"),
   },
   module: {
     rules: [
       {
         test: /.css$/,//匹配.css文件
         use: ["style-loader", "css-loader"],//使用css-loader,style-loader
       },
     ],
   },
 };
 ​

注意：loader的书写是由循序要求的，loader是从右到左，从下到上，进行执行的。由于我们需要先使用css-loader解析css，然后使用style-loader将解析后的css插入的页面当中，因此书写顺序不能乱。

处理.less文件

浏览器是无法解析less文件的，我们需要使用less工具，将less文件转为css文件。

安装less工具：

 npm install less -D

转为css文件：

  //后面第一个参数为源文件，第二个为目标文件
  npx lessc ./src/one.less one.css

在项目为了实现less文件在打包是自动转为css文件，我们需要安装less-loader。

 npm install less-loader -D

配置webpack

 const path = require("path");
 ​
 module.exports = {
   entry: "./src/index.js",
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "./dist"),
   },
   module: {
     rules: [
       {
         test: /.css$/,
         use: ["style-loader", "css-loader"],
       },
       {
         test: /.less$/,
         use: ["style-loader", "css-loader", "less-loader"],
       },
     ],
   },
 };
 ​

postcss

postcss可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；

但是它的功能是依赖于插件的，因此我们需要安装它的内置插件来完成相应的功能。

安装postcss和postcss-cli

 npm install postcss postcss-cli -D

安装autoprefixer插件，可以自动添加前缀。

 npm install autoprefixer -D

使用命令来转换要添加前缀的文件。

 //参数一：转换后的目标文件，参数二：需要转换的文件
 npx postcss --use autoprefixer -o end.css ./src/css/style.css

在项目中，我们可以通过postcss-loader来使用postcss。

安装postcss-loader:

 npm install postcss-loader -D

配置webpack:要实现自动添加前缀，我们需要使用autoprefixer插件。

 {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader",
           {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
                 plugins: [require("autoprefixer")],
               },
             },
           },
         ],
       },

配置插件，我们也可以使用单独的文件postcss.config.js来导入插件。

 module.exports = {
   plugins: [require("autoprefixer")],
 };
 ​
 //也可以这样写
 module.exports = {
   plugins: ["autoprefixer"],
 };

为了添加前缀，我们不必非要使用autoprefixer插件，postcss-preset-env插件也可以自动添加前缀，并且还可以使用新的css特性，该插件会根据浏览器的不同将其转为该浏览器可以识别的属性。

安装postcss-preset-env:

 npm install postcss-preset-env -D

配置插件：

 module.exports = {
   plugins: [require("postcss-preset-env")],
 };
 ​
 //也可以这样写
 module.exports = {
   plugins: ["postcss-preset-env"],
 };

\