【webpack5】基础部分总结

一、五大核心概念

mode：开发模式development/生产模式production
entry：入口，从哪个文件开始编译
output：出口
plugin：插件
loader：写在module中，加载器

二、基本配置

固定在根目录，新建一个文件名为webpack.config.js内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const path = require("path")

module.exports = {
    mode: 'development',
    entry: './src/main.js', // 相对路径
    output: {
        path: path.resolve(__dirname, 'dist'),//输出路径，绝对路径
        // __dirname: nodejs的变量，代表当前文件的文件夹目录
        filename: 'main.js',//文件名
    },
    module: {
        rules: [
            // loader的配置
        ]
    },
    plugins: [],
    devServer: {
        port: 8082,
        compress: true,
        static: path.join(__dirname,'dist','index.html')
    }
}

新建src文件夹，在src文件夹下建立main.js，然后执行npx webpack就会自动打包。

三、处理资源

注：多个loader配合使用时，处理顺序是：从下到上，从右到左 的顺序

1. css

因为webpack只能识别js资源，所以要处理css需要用loader
如加一个css-loader，先安装css-loader在开发环境中，然后在module中加载rules

1
2
3
4
5
6

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

对于一条规则，也可以使用多个loader，在use中配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 对后缀名为css的文件，使用多个loader处理
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

常见的处理样式文件的loader：

css-loader ：处理css文件
less-loader
sass-loader
style-loader：处理style标签内的样式
stylus-loader：使用模块化的方法去写css代码
stylus：是一种写css的方式，没有花括号没有分号，用缩进的方式去代替大括号，后缀名为styl

2. 图片资源

webpack4使用file-loader和url-loader处理图片
file-loader:将图片转换为webpack能识别的资源。
url-loader:将小于某个大小的图片转换为base64
处理图片并不需要loader，webpack5自带默认处理图片，只需要在loader中配置

3. 修改打包资源的路径

像输出时，默认js、图片等等都会在一个目录中，现在想要配置成其他目录。

1
2
3
4
5

output: {
    path: path.resolve(__dirname, 'dist'),//所有文件的输出路径，绝对路径
    // __dirname: nodejs的变量，代表当前文件的文件夹目录
    filename: 'js/main.js',//打包入口文件js的文件名，所以如果指定了js/xxx.js，那么入口js文件都会被打包到js目录下
},

重新npx webpack就变成了这样

######图片资源路径的修改：在module/rules的对应loader中配置generator

1
2
3
4

generator: {
    //输出图片名称及目录，hash：唯一id，10代表hash值只取前十位，ext：文件扩展名    
    filename: 'static/images/[hash][ext]',
},

打包效果：

4. 自动清空上次打包资源

webpack不会自动删除上次打包内容，可能会造成重叠，文件很多，可以配置每次打包自动删除之前的打包结果。
配置方法：clean：true

1
2
3
4
5
6
7
8

output: {
    path: path.resolve(__dirname, 'dist'),//所有文件的输出路径，绝对路径
    // __dirname: nodejs的变量，代表当前文件的文件夹目录
    filename: 'js/main.js',//打包入口文件js的文件名，所以如果指定了js/xxx.js，那么入口js文件都会被打包到js目录下
    clean: true 
    // 自动清空上次打包的内容
    // 原理：在打包前，将path整个目录清空，在进行打包输出
},

5.处理其他资源

如视频、字体、excel等等，想统一处理的话，可以如下配置：

1
2
3
4
5
6
7

{
    test: /\.(mp3?4|ttf|avi|doc|rmvb)/,
    type: 'assert/resource',
    generator: {
        filename: 'static/images/[hash:10][ext]',
     }
},  

官网对于type: assert的几个值的介绍：

asset/resource 发送一个单独的文件到输入目录并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI（如，base64）。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

6. ESLINT

eslint：用来检测js和jsx语法，可以管理缩进、规则是否正确，让代码更加健壮。
配置文件：eslintrc.js
在webpack4中使用loader处理。
在webpack5中使用plugins去处理。

如何使用？

根目录新建eslintrc.js，然后在webpack.config.js中配置plugin
官网文档：点击查看
plugins要用require引入。

1
2
3
4
5
6
7
8

const ESLintPlugin = require('eslint-webpack-plugin');

    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, 'src')
// 开发时是只需要检查源代码，打包的dist代码是不用检查的。
        })
    ],

简单的eslintrc.js的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

module.exports = {
    // 继承eslint规则
    extends: ["eslint: recommended"],
    env: {
        node: true, // 启用node中的全局变量
        browser: true, // 启用浏览器的全局变量
    },
    parserOptions: {
        ecmaVersion: 6, // es6 模块
        sourceType: 'module'
    },
    rules: {
        "no-var": 2, //不能使用var定义变量
    }
}

如果有不需要检查的文件，新建eslintignore可以不检查。

7. babel

还是一样，webpack官网搜babel，就会出来babel-loader的配置，复制过来根据自己的需要做修改。
根目录新建babel.config.json，其中配置babel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage",
          "corejs": "3.6.5"
        }
      ]
    ]
  }

1
2
3
4
5
6
7
8
9
10

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
}

如果不写上面的options，那么会用babel.config.json中的配置去转换代码的。
@babel/preset-env：智能预设，允许使用最新的js
@babel/preset-react：用来编译jsx
@babel/preset-typescript：用来编译ts。

targets：需要兼容的浏览器版本，可以用这些属性 ：
android, chrome, deno, edge, electron, firefox, ie, ios, node, opera, rhino, safari, samsung
也可以设置成一个string，比如 > 0.5%, last 2 versions, not dead 意思是有大于百分之零点五的人使用，前两个版本，并且没有废弃

useBuiltIns有几个值
false：默认值，不做任何语法转换
usage Babel：将检查你的所有代码，以便查找targets环境中缺失的功能，然后只把必须的 polyfill 包含进来
entry：引入所有的polyfill包，必须在入口文件加入 import “core-js/stable” 才会生效

useBuiltIns 需要搭配 core-js，并且需要在配置文件里面声明。目前core-js最新版本是3.x，也可以指定2.x。
npm i core-js -S
“corejs”: “3.6.5”

8. 处理html

点击查看
首先js打包文件可能名字是动态生成的，需要自动引入js到html，才会确保不出错的
所以可以自动生成index.html文件，插件为HtmlWebpackPlugin

1
2
3
4
5
6
7
8
9
10
11
12
13

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'index.html')
        })],
};

首先插件会自动生成一个index.html，template中写的index.html意思是通过template里的这个index.html生成一个index.html到dist目录中，所以两个不是一个意思。

三、搭建开发服务器

安装webpack-dev-server

1
2
3
4
5

devServer: {
    port: 8082,
    compress: true,
    static: path.join(__dirname,'dist','index.html')
}

四、生产模式的搭建

生产模式也就是线上实际使用的代码，会被压缩。因为体积小，加载就快。
一般会新建一个config/webpack.dev.js做开发环境的搭建。
一般会新建一个config/webpack.prod.js做线上环境的搭建。
然后建立webpack.config.js，将两个配置引入。

改动的主要地方

1、如果配置文件新建一个文件夹放起来，那么需要将所有绝对路径改为上层路径。
2、mode的更改
3、开发模式删除output，生产模式删除devServer

常见打包命令：

npx webpack：自动打包命令
npx webpack serve --config ./config/webpack.dev.js ：运行./config/目录下的webpack.dev.js配置文件，并启动服务
npx webpack --config ./config/webpack.prod.js ： 运行./config/目录下的webpack.prod.js配置文件

五、css处理

1. css单独提取

之前处理css的方法：

是将css用css-loader变为webpack可识别的文件后
在入口文件main.js使用imort引入css
再使用style-loader将css转换为网页中的style内联标签
####使用MiniCssExtractPlugin：
将style-loader生成的style标签内的css单独提取为css文件，注意必须要安装style-loader

1
2
3
4
5
6
7
8
9
10
11
12

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

入口文件main.js中：

1

import "./style.css";

注：

• 要生成页面内style标签的形式，那么css-loader和style-loader要同时使用。
• 要生成单独的css文件，那css-loader和miniCssExtractPlugin.loader要同时使用。（不用style-loader）

  2. 兼容性处理

  postcss-loader：兼容性处理，需要安装postcss与postcss-loader，配置在css-loader和style-loader之后，在less和sass的前面，这个是固定的噢
  在package.json中，配置

  1 2 3 4

  "browserslist": [ "ie >= 8" // 需要兼容ie8以上的兼容 ]

  然后按照官网去配置loader

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'postcss-preset-env', { // 其他选项 }, ], ], }, }, }, ],

  1 2 3 4 5

  "browserslist": [ "last 2 version", // 兼容所有浏览器厂商的最近两个版本 "> 1%", // 覆盖99%浏览器 "not dead" // 已经kill的版本 ]

  3.CssMinimizerPlugin压缩css

  一般来说，压缩操作在webpack5中都放进optimization中，虽然放在plugins中也可以，不太规范拉。~

  1 2 3 4 5 6 7 8 9 10 11

  const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { optimization: { minimizer: [ // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释 // `...`, new CssMinimizerPlugin(), ], }, }

  ---

常见的loader总结：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 发送一个单独的文件并导出 URL
• 各种css-loader
• postcss-loader：兼容性处理，需要安装postcss与postcss-loader，配置在css-loader和style-loader之后，在less和sass的前面，这个是固定的噢
  ##常见的plugin总结：
• MiniCssExtractPlugin：将style-loader生成的style标签内的css单独提取为文件，注意必须要安装style-loader
• CssMinimizerWebpackPlugin: 压缩css
• ESLintPlugin：eslint检查
• terserWebpackPlugin：压缩代码

  ---