webpack中文文档：https://www.webpackjs.com/guides/getting-started/

文章目录

1.安装

首先在项目中安装 webpack 及 webpack-cli。

npm init -y
npm install webpack webpack-cli --save-dev

2.初步使用

假设我们的整个项目中使用了 ESModule 规范，那么在 html 文件中直接引入(不为 script标签添加type属性)，肯定是不可以的。

那么我们可以使用 webpack 将多个文件进行打包成一个文件。

在安装完成依赖之后，可以使用 npx 或者 yarn 执行以下命令。

  • npx：npm > 5.2.0 才可以使用该命令，它会去当前项目的 node_modules 中查找依赖执行。

前提是你的 js 入口文件在 src->index.js 这个位置，因为这是 webpack 入口文件的默认路径。

npx webpack

随后会在产生 dist -> main.js 文件，该文件就是打包好的文件，可以直接引入。

3.配置文件

我们可以在根目录新建一个 webpack.config.js 配置文件，该文件遵循 CommonJS 规范。

在导出的配置对象中，可以使用核心概念中的配置项。

module.exports = {
    // 配置文件内容
};

4.核心概念

入口(entry)：从哪个文件开始，默认是./src/index.js。

module.exports = {
    entry: './src/main.js'
};

输出(output)：将打包后的文件，输出到哪个位置，并且设置文件名称。

const path = require('path');

module.exports = {
    output: {
        // 可选: 文件名称
        filename: 'my-first-webpack.bundle.js',
        // 可选: 存储文件的文件夹位置(绝对路径)
        path: path.resolve(__dirname, 'dist'),
        /**
        * 可选: 用于用哪里查找文件, 默认为根路径, 如果要部署到二级目录, 则需要配置这里, 需要注意最后要加 /
        *  - 假设我要将打包的vue文件部署在 yq2048.cn/blog 这个目录，那么此时就不能在使用默认的了。
        *  - 因为这样它在加载 js 等资源时，就会去 yq2048.cn 这个目录中去查找。
        *  - 我这里应该修改为 blog/ 这个内容，这样它就会去 blog 这个文件夹中去查找了。
        *  - !!!以上说明针对于 vue-cli(vue2) 和 webpack4 。
        */

        /**
        * 在 webpack5 中它的值默认是 auto，会自动根据当前的 url 去确定静态资源的引用路径，几乎不用配置该字段。
        */
        publicPath: 'blog/',
    }
};

加载器(loader)：webpack 开箱自带处理 json 和 js 文件的能力。

loader 可以让 webpack 去处理其它类型的文件，并将它们转换为有效的模块。

在 module->rules<Array> 下的每个配置对象中，可以配置：test<正则> 和 use<Array> 属性。

其中正则用来匹配文件类型，use 数组中添加对该类型文件使用的 loader 名称。

如果 use 数组中有多个 loader，那么它的顺序是逆序执行的。

module.exports = {
    module: {
        // 规则: 
        rules: [
            {
                // 针对于 css 文件
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.css' 的路径」时，在你对它打包之前，先 use(使用) css-loader 转换一下，转换完成后交给 style-loader。”

插件(plugin)：用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

module.exports = {
    plugins: []
};

模式(mode)：通过选择 development | production | none中的一个，其默认值为 production。

DefinePlugin：注入全局变量的插件，可以在项目任何地方使用注入的全部变量。

production模式(默认值)：DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。
并且会将打包后的代码进行压缩混淆。

development模式：DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。

none模式：：不使用任何默认优化选项。

我们可以通过执行 webpack cli 命令时携带模式，或者在配置文件中配置。

需要注意的是：cli传递的mode会覆盖配置文件的mode。

// 配置文件的方式
module.exports = {
    mode: 'production'
};

// webpack cli的方式
npx webpack --mode=production