webpack基础

发表于 更新于 分类于 阅读次数： 本文字数： 8k 阅读时长 ≈ 7 分钟
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

安装 webpack

  1. 初始化 package.json
1
npm init -y

生成基础 package.json

  1. 下载依赖包

1
npm i webpack webpack-cli -D

  1. 启用 webpack

  • 开发模式

1
npx webpack ./src/main.js --mode=development

  • 生产模式

1
npx webpack ./src/main.js --mode=production

基本配置

  1. entry(入口)
    指示 Webpack 从那个文件开始打包

  2. output(输出)
    指示 Webpack 打包完成的文件输出到哪，如何命名。

  3. loader(加载器)
    webpack 本身只处理 js、json 等资源，其他资源需要借助 loader 才能解析。

  4. plugins(插件)
    扩展 webpack 功能

  5. mode(模式)
    两种模式： - 开发模式：development - 生产模式：production

Webpack 配置文件

在根目录创建 webpack.config.js
基本格式为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require("path"); //解决路径问题
module.exports = {
  entry: "./src/index.js", //入口文件
  output: {
    path: path.resolve(__dirname, "dist"), //文件绝对路径
    filename: "main.js", //文件名
    clean: true, //打包前删除原打包文件
  },
  module: {
    //加载器
    rules: [
      //loader配置
    ],
  },
  plugins: [
    //plugin配置
  ],
  mode: "development", //模式
};

处理样式资源

css 处理

  1. 安装 loader
    npm i style-loader less-loader less -D

  2. 将 loader 引入配置文件在官网文档找到 loder

1
2
3
4
5
6
7
8
9
10
11
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader", //将js中css通过创建style标签添加进html文件中
          "css-loader", //将css资源编译成commonjs的模块到js中
         ],
      },
    ],
  },

处理 less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
         ],
      },{
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      }
    ],
  },

其他的配置基本一致

处理图片资源

将小于 10kb 的图片转为 base64 格式

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
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
         ],
      },{
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },{
        test: /\.(png|jpe?g|gif|webp|svg)$/,  //选择图片类型
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,        //小于10kb
          }
        }
      }
    ],
  },

修改输出目录

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
output: {
  path: path.resolve(__dirname,"dist"),
  filename: "static/js/main.js"         //js目录
}
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
         ],
      },{
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },{
        test: /\.(png|jpe?g|gif|webp|svg)$/,  //选择图片类型
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,        //小于10kb
          }
        },
        generator: {
          //输出文件名称与位置
          //[hash:10]表示取hash前10位
          filename: "static/images/[hash:10][ext][query]"   //图片目录
        }
      },
      {
        test: /\.(ttf|woff2?)$/,  //字体打包
        type: "asset/resource",
        generator: {
          //输出文件名称与位置
          //[hash:10]表示取hash前10位
          filename: "static/media/[hash:10][ext][query]"   //字体目录
        }
      }
    ],
  },

xxxxxxxxxx1 1this.$store.commit(“person/fn”, value); //斜杠前为命名空间，斜杠后为方法名javascript

.eslintrc.js配置文件

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  parserOptions: {
    ecmaVersion: 6, //es语法版本
    sourceType: "module", //es模块化
    ecmaFeatures: {
      //es其他特性
      jsx: true, //React项目要开启jsx语法
    },
  }, //解析选项
  rules: {}, //检查规则
  extends: [], //继承其他规则
};

安装 eslint 与配置

1
npm i eslint eslint-webpack-plugin -D

将插件添加进 webpack 配置

1
2
3
4
5
6
7
8
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = {
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, "src"), //检查src下的文件
    }),
  ],
};

根目录添加.eslintrc.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  parserOptions: {
    ecmaVersion: 6, //es语法版本
    sourceType: "module", //es模块化
    ecmaFeatures: {
      //es其他特性
      jsx: true, //React项目要开启jsx语法
    },
  }, //解析选项
  rules: {}, //检查规则
  extends: [exlint:recommended], //继承其他规则
  env:{
    node: true,  //启用node中全局变量
    browser: true   //启用浏览器中全局变量
  }
};

根目录添加.eslintignore文件,用于忽略检查的文件写入

1
dist

代表忽略 dist 文件夹的语法检查

Babel

文档中可查阅相关配置根目录创建babel.config.js文件用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以运行在当前和旧版本的浏览器或其他环境中。

1
2
3
module.exports = {
  preset: [], //预设
};

安装与配置

webpack 3.x | babel-loader 8.x | babel 7.x

1
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x

1
npm install babel-loader babel-core babel-preset-env webpack

在 webpack 配置文件的 rules 中添加

1
2
3
4
5
6
7
{
  test: /\.js$/,
  exclude: /node_modules/,  //排除node_modules中文件
  use: {
    loader: 'babel-loader',
  }
}

在babel.config.js文件中添加

1
2
3
module.exports = {
  preset: ["@babel/preset-env"], //智能预设，编译ES6语法
};

处理 html 资源

文档

1
npm install --save-dev html-webpack-plugin

在 webpack 配置文件中

1
2
3
4
5
6
7
8
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
  new HtmlWebpackPlugin({
    //以publich/index.html文件创建新的html文件
    //新的html文件与原来结构一致，自动引入了打包的资源
    template: path.resolve(__dirname, "publich/index.html"),
  }),
];

搭建开发服务器

文档下载包：

1
npm i wenpack-dev-server -D

webpack 中添加新的属性

1
2
3
4
5
devServer: {
  host: "localhost",  //启动域名
  port: "3000",  //启动端口
  open: true  //自动打开浏览器
}

运行npx webpack server可运行服务器

生产模式准备

创建 config 文件夹在 config 文件夹内创建webpack.dev.js与webpack.prod.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
//webpack.dev.js 开发模式配置文件
output:{
  path: undefind,   //开发模式没有输出
  filename: "static/js/main.js"
}
plugins: [
  new ESLintPlugin({
    context: path.resolve(__dirname, "../src"),  //绝对路径回退一个目录
  }),
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../publich/index.html"),//绝对路径回退一个目录
  }),
],

运行npx webpack serve --config ./config/webpack.dev.js指运行开发模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//webpack.prod.js 生产模式
output:{
  path: path.resolve(__dirname,"../dist"),  //绝对路径
  filename: "static/js/main.js",
  clear: true //配置自动清除
}
plugins: [
  new ESLintPlugin({
    context: path.resolve(__dirname, "../src"),  //绝对路径回退一个目录
  }),
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../publich/index.html"),//绝对路径回退一个目录
  }),
],
//删除devServer
mode: "production"

运行npx webpack serve --config ./config/webpack.dev.js指定运行生产模式

在package.json中,找到 scripts 项添加：

1
2
3
"start": "npm run dev"
"dev": "webpack serve --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"

运行开发模式：npm start生产模式：npm run build

提取 css 为单独文件

文档安装插件npm install -D mini-css-extract-plugin
导入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//将所有 "style-loader" 改为 MiniCssExtractPlugin.loader
plugins: [new MiniCssExtractPlugin({
  filename: "static/css/main.css"
})],
module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
          MiniCssExtractPlugin.loader,
         "css-loader"
         ],
    },
  ],
},

样式兼容性

文档安装包：

1
npm install -D postcss-loader postcss postcss-preset-env

配置写在 css 后，less 前

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
module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",//css
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',   //css之后
                  ],
                ],
              },
            },
          },
         ],
      },{
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader", //css
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',  //less之前
                  ],
                ],
              },
            },
          },
          "less-loader", //less
        ]
      }
    ],
  },

兼容性程度设置：在 package.json 中，最后面添加 browserslist 属性

1
2
3
4
5
"browserslist":[      //取交集
  "last 2 version",
  "> 1%",
  "not dead"
]

封装样式 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
30
31
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader,
   "css-loader",
   {
     loader: 'postcss-loader',
     options: {
       postcssOptions: {
         plugins: [
           [
             'postcss-preset-env',
           ],
         ],
       },
     },
   },
   pre,
  ].filter(Boolean);
}

module: {
  rules: [
    {
      test: /\.css$/i,
      use: getStyleLoader(),
    },{
      test: /\.less$/,
      use: getStyleLoader('less-loader'),
    }
  ],
},

css 压缩

文档安装包

1
npm install css-minimizer-webpack-plugin -D
1
2
3
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [new MiniCssExtractPlugin()];