webpack核心配置-学习笔记

5/11/2021 Webpack

# 文章目录

# 一、指定出口入口和指定配置文件

npx:表示使用的是局部的 webpack 来打包,而不是全局的 webpack
npx webpack \--entry ./src/main.js \--output-path ./publish

指定使用 webpack 配置文件的形式来打包:
"build": "webpack \--config ./build.config.js"

# 二、配置 loader

# 2.1 配置 css-loader style-loader

style-loader的功能是:把 CSS 插入到 DOM 中,
原理是: document.createElement('style'),然后把css内容放到这个标签里。

const path = require('path')

module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        // 匹配资源 正则 下面的正则匹配的是以 .css结尾的 忽略大小写
        test: /\.css$/i,
        // loader:"css-loader",一级简写 => 真实写法
        // 注意 loader 是从右往左 从下网上的
        use: [
          'style-loader',
          'css-loader'// 二级简写 => 真实写法
          // { loader: "css-loader", } // 真实写法
        ]
      },
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 2.2 配置 less-loader

注意:less-loader是基于less工作的,所以要安装以下两个依赖:
npm i less less-loader \-D

const path = require("path");
module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2.3 浏览器兼容性 browserslist

这个工具可以根据我们传入的参数,查询对应的浏览器支持情况。

npx browserslist ">1%, last 2 version, not dead,not ie <= 8"
解读:

  • npx 即 使用局部的 browserslist
  • ">1%"指的是市场占有率大于百分之一
  • last 2 version 最近的两个版本
  • not dead 没有死亡的,即官网还在维护的
  • not ie <= 8 排除 ie8 以下的浏览器

[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblogWdnimg.cn/sqHl20210509163701117.pg?)(https://img-log.csdnimg.cn/20210509163701117.png?)]

# 2.4 在 package.json 种使用

在这里插入图片描述

"browsers":[
  "1>%",
  "last 2 version",
  "not dead",
  "not ie <= 8"
]
1
2
3
4
5
6

# 3.2 在文件中使用

在这里插入图片描述
这个工具会自动在 pageckage.json.browserslistrc 中查找的,两种方式任选一种

# 三、Plugin 配置

  • Loader 是用于特定的模块类型进行转换;
  • Plugin 可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等;
    在这里插入图片描述

# 3.1 CleanWebpackPlugin 自动删除打包文件夹

接下来配置我们的第一个插件,
CleanWebpackPlugin这个插件的功能是自动删除我们之前打包好的文件夹。

npm i \--save-dev CleanWebpackPlugin

使用:

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader'     ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 3.2 HtmlWebpackPlugin 指定使用 index.html 模板

使用HtmlWebpackPlugin插件,可以指定index.html模板。

npm i html-webpack-plugin \--save-dev

使用:

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        test: /\.(jp?g|png|gif|svg)/i,
        // type: "asset/inline",
        type: "asset",
        generator: {
          filename: 'img/[name]-[hash:6][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024,// 100kb
          }
        }
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "bookbook.cc",// 设置index.html 的title
      template: "./public/index.html",// 指定模板文件
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 3.3 webpack.DefinePlugin 定义构建过程中的全局变量

在这里插入图片描述
如上图,这个BASE_URL是从哪儿来的呢?
这个插件是 webpack 内置的不需要我们安装。

答案是:webpack 内置的插件webpack.DefinePlugin中来的

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { DefinePlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "js/bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: 'font/[name]-[hash:8][ext]'
        }
      }
    ]
  },
  plugins: [
    // 自动删除打包的文件夹
    new CleanWebpackPlugin(),
    // 设置 index.html 模板
    new HtmlWebpackPlugin({
      title: "pengsir",//设置index.html 的title
      template: "./public/index.html"
    }),
    // 定义全局变量
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 3.4 CopyWebapckPlugin 复制文件夹到打包目录

如题,怎么实现vue项目打包时的public文件夹复制效果呢?

npm i copy-webpack-plugin \--save-dev

答案是:插件CopyWebapckPlugin

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { DefinePlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebapckPlugin = require('copy-webpack-plugin')

module.exports = {
  // 入口 可以是相对路径
  entry: "./src/main.js",
  // 出口
  output: {
    // 输出文件的名字
    filename: "js/bundle.js",
    // 只能是绝对路径
    path: path.resolve(__dirname, './build')
  },
  module: {
    rules: [
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: 'font/[name]-[hash:8][ext]'
        }
      }
    ]
  },
  plugins: [
    // 自动删除打包的文件夹
    new CleanWebpackPlugin(),
    // 设置 index.html 模板
    new HtmlWebpackPlugin({
      title: "pengsir",//设置index.html 的title
      template: "./public/index.html"
    }),
    // 定义全局变量
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    // 复制文件夹 vue的public
    new CopyWebapckPlugin({
      // patterns 匹配
      patterns: [
        {
          // 从哪里复制
          from: "public",
          globOptions: {
            // 需要忽略的文件
            ignore: ["**/index.html"],
          }
        }
      ]
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar