语言►nodejs►库►webpack

什么是webpack

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/05/30/%E4%BB%80%E4%B9%88%E6%98%AFwebpack/

摘要

本文主要讲述了：

  1. 什么是 webpack
  2. 安装
  3. 配置
  4. 兼容性

正文

什么是 webpack

webpack 是一个 JavaScript 的模块打包器。

安装

局部安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev webpack webpack-cli

注：因为webpack仅负责打包，其代码实际并未被注入项目中，故使用--save-dev参数

配置

entry

entry（入口）是一切的起点。

默认值：./src/index.js

示例：

learn_webpack/webpack.config.js

1
2
3
module.exports = {
  entry: './src/index.js',
};

output

output（出口）是一切的终点。

output 是一个对象。它包含path和filename两个属性。

  • path表示出口目录，path必须使用绝对路径表示。默认值是path.resolve("dist")
  • filename表示出口文件名，默认值是main.js

示例：

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
const path = require('path');

module.exports = {
  ouput: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

loader

loader 的作用是：将其他类型的文件转换为 JavaScript 模块供webpack打包。

webpack本身只能理解和处理 JavaScript 和 JSON。如果要处理其他类型的文件，需要使用 loader（加载器）的帮助。

对于任何类型的文件，可以只使用一个 loader 去处理，也可以使用多个 loader 去处理它。

示例：为 CSS 文件配置css-loader和style-loader

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
};

注意：loader 的处理顺序：数组索引越高的 loader 越先执行

在这个例子中，webpack.config.js告诉webpack，如果遇到以.css为结尾的文件，先调用css-loader去转换它，css-loader转换完以后，再调用style-loader继续转换。

plugin

plugin（插件）的作用是打包优化、资源管理以及环境变量注入等。

和 loader 不同，plugin 需要使用require()手动引入并添加到plugins数组中。大多数 plugin 都可以通过选项进行自定义。开发者可以出于不同的目的多次使用 plugin，正因此，使用 plugin 时必须使用new运算符创建实例。

示例：配置html-webpack-plugin

learn_webpack/webpack.config.js

1
2
3
4
5
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
};

mode

mode（模式）。

不同模式下的webpack行为会有差异。

mode的取值范围：

  • development
  • production，默认值
  • none

示例：

learn_webpack/webpack.config.js

1
2
3
module.exports = {
  mode: 'development',
};

兼容性

支持所有现代浏览器

对于部分浏览器，需要另行配置 polyfill

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/05/30/%E4%BB%80%E4%B9%88%E6%98%AFwebpack/

本文对你有帮助？请支持我

支付宝
微信