webpack的配置文件（二、基本配置）

2.2、webpack的配置文件

2.2.1、基本配置

我们在第一节的概述中提及了webpack的五个核心概念，这五个核心概念都属于webpack的配置，因此，如果需要更好的运用webpack，我们需要掌握其配置文件的相关知识点。

配置的方式有两种：单配置文件形式（默认配置）、多配置文件形式。（二选一即可）

类似于vue中的环境变量：

• .env

• .env.production

• .env.development

首先来看单配置文件方式：在项目根目录下面创建一个webpack.config.js文件，webpack运行的环境为nodejs环境，所以此文件中的模块化规范为commonjs规范写法。该配置文件创建好后会被webpack在打包时自动使用（因此，文件名不能写错）。

const path = require("path");
​
module.exports = {
    // 打包模式  development |  production
    mode: "development",
    // 项目入口
    entry: "./src/index.js",
    // 项目出口
    output: {
        path: path.resolve(__dirname, "dist"),
        // [name]默认的名称为main（如果需要分目录，可以在名字前加文件夹名字）
        filename: "js/[name].js",
    },
};

另一种配置方式是：在项目根目录中创建一个config目录（为了便于后期管理，提前预设两套或多套webpack配置），专门用于存放webpack的相关配置文件：

 由于这两个文件不似/webpack.config.js文件会被webpack自动使用，因此需要在package.json文件中进行分别引入指定：

这样一来，后续如果需要将项目打包成开发环境需要的代码则执行命令：

npm run build:dev

如果需要将项目打包成生产环境需要的代码则执行命令：

npm run build:pro

注意：由于在config下面的配置文件中指定了输出的路径，此时路径也需要做一下修改，否则打包的dist目录就会在"config/dist"这个位置。只需要给“dist”加上“../”即可：

path: path.resolve(__dirname, "../dist"),

在实际开发的时候推荐使用多套配置文件的方案，便于管理不同环境下需要的打包的配置，避免来回切换配置。

2.2.2、配置默认预览页

问题：在打包好的代码中并没有index.html，还需要手动将html代码复制到dist目录中（或者可以在index.html中修改js脚本文件的引入路径），这个操作比较麻烦，能不能像vue项目一样，直接将html复制过去？

答：有

首先需要安装一个扩展模块，安装命令如下：

npm i -D html-webpack-plugin@4

然后修改webpack的配置文件（此时需要注意你使用的是哪种配置文件方式，单一or多个，并做对应的修改），增加以下配置项：【此处以production.js配置为例】

const HtmlWebpackPlugin = require("html-webpack-plugin");
​
module.exports = {
    // ....
    plugins: [
        new HtmlWebpackPlugin({
            // template是必须的（路径是相对于项目的根）
            template: "./public/index.html",
        }),
    ],
}

使用该款插件后，会自动在视图中去帮我们引入打包好的文件main.js：

这款插件在工作的时候帮我们实现了2个操作：

• 复制对应的template模版文件到dist目录下

• 将打包好的js文件，自动引入到模板文件中

  • 需注意：最好将自己原先在html中引入的外部文件给去掉，因为它会自己加，自己写的不去除会出现以下两种情况之一：

    • 重复引入（无意义）

    • 引入文件出现404情况

2.2.3、配置实时打包预览（开发服务器）

通过上一节，我们已经可以使用打包工具去将写好的代码进行打包了，但是在操作的过程中大家可能会发现有一个比较麻烦的地方：修改一次代码就得重新打包一次，这种感觉有点类似于之前的node xxx.js一样，那么在webpack这里是否有类似于nodemon那么好用的自动化工具能帮助我们自动检测文件的变化并自动执行呢？答案是有的，它就是webpack-dev-server自动化打包工具。

类似于：

在vue中，我们并不是每次改完代码都打包看效果，而是在开发过程中有一个测试服务器，自动帮我们产生预览效果，但是并会真的去打包，只有等上线的时候我们才去打包。实时预览服务器可以通过工具webpack-dev-server。

webpack-dev-server的安装指令如下：

npm i -D webpack-dev-server@3.11.0

开发服务器的服务支持一系列配置选项，可以根据以下代码取所需的配置：

module.exports = {
    devServer: {
        // 端口号
        port: 8080,
        // 域名
        host: "localhost",
        // 自动打开浏览器（可能因为计算机安全策略导致不生效）
        open: true,
        // 服务器代理 --> 解决开发环境跨域问题
        proxy: {
            // 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
            "/api": {
                target: "http://localhost:3000",
                // 发送请求时，请求路径重写: 将/api 去除
                pathRewrite: {
                    "^/api": "",
                },
            },
        },
    },
};

安装好后同样也需要在package.json中配置自定义执行的指令：

随后即可通过自定义指令来运行自动打包服务：

# 该命令执行完后命令行会如同执行`nodemon`一样处于实时检测的状态
npm run serve

启动打包服务后，即可通过浏览器访问http://127.0.0.1:8080来浏览自动打包好的项目。

注意点

• 上述过程中，会自动产生并运行一个临时性的服务器供我们预览，访问地址是：http://127.0.0.1:8080

• 上述过程中，打包生成的输出文件会托管在项目根下，但文件是虚拟的，是无法看见的，也就是说该操作并不会产生前面所谓的dist目录，如果需要得到打包好的目录，还是得运行之前的打包命令

• 在此处系统会自动引入需要的外部文件，如果此前我们自己已经引入了，则需要去除自己引入的外部文件