使用npm scripts

在《Webpack入门，打包第一个工程》文章讲到，webpack打包工程命令为 npx webpack --entry=./index.js --mode=development。如果每次打包时都要输入这样的命令，不仅耗时，而且容易出错。

为了使命令行指令更简洁，可以在package.json中添加一个脚本命令。

编辑工程中的package.json文件

......
"scripts": {
    "build":"Webpack --entry=./index.js --mode=development"
},
......

scripts使npm提供的脚本命令功能，在这里开发者可以直接使用由模块添加的指令（比如用webpack取代之前的npx webpack）。

为了验证打包结果，可以对addContent.js的内容稍加修改

// addContent.js
export default function() {
    document.write("use npm scripts!");
}

重新打包，这次命令输入npm run build即可。

用浏览器打开index.html，会看到页面展示“use npm scripts!”。

使用默认目录配置

在之前的工程中，index.js是放在工程根目录下，而通常情况下我们会分别设置源码目录与资源输出目录。通常情况下，工程源代码放在/src中，输出资源放在/dist中，而这些在Webpack中都是默认的配置，所以，如果没有特别的要求，在使用打包命令时，我们可以省略entry与output的配置。

建议

虽然目录命名并不是强制的，且Webpack提供了配置项让我们进行更改，但是还是建议遵循统一的命名规范，这样会使得大体结构比较清晰，也利于多人协作。

使用配置文件

为了满足不同应用场景的需求，Webpack拥有非常多的配置项以及相对应的命令行参数。开发者可以通过Webpack的帮助命令来进行查看。npx webpack -h

注意

由于Webpack使用的本地安装模式，需在工程根目录中，打开命令行，然后运行npx webpack -h命令

配置Webpack打包命令时，可以在package.json中使用npm scripts配置脚本命令。当项目需要越来越多的配置时，就要往命令中添加更多的参数，那么到后期维护起来就会相当困难。为了解决这个问题可以把这些参数改为对象的形式专门放在一个配置文件里，在Webpack每次打包时读取该配置文件即可。

Webpack的默认配置文件为webpack.config.js（也可以使用其他文件名，需要使用命令行参数指定）。

在工程根目录下新建webpack.config.js，并添加如下代码

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
},
    mode: 'development',
}

在配置文件中通过module.exports导出一个对象，也就是打包时被Webpack接受的配置对象。先前在命令行中输入的一大串参数就都要改为key-value的形式放在这个对象中。

现在就可以去掉package.json中配置的打包参数了。

......
"scripts": {
    "build": "webpack"
}
......

为了验证最终稿效果，对addContent.js的内容稍加修改

export default function() {
    document.write("use webpack config build!");
}

执行npm run build命令，Webpack就会预先读取webpack.config.js，然后打包。完成之后打开index.html进行验证。

使用webpack-dev-server

到这里，Webpack的初始环境已经配置好了。以往只要编辑项目源文件（JS、CSS、HTML等），刷新页面即可看到效果，现在多了一步打包，即在改完项目源码后执行npm run build更新main.js，然后才能刷新页面生效，开发调试的效率并不高。针对这种场景，Webpack社区已经为开发者提供了一个敏捷的本地开发工具——webpack-dev-server。

使用webpack-dev-server需要通过命令进行安装npm install webpack-dev-server -D

提示

安装指令中的-D参数是将webpack-dev-server作为工程的devDependencies（开发环境依赖）记录在package.json中。这样做是因为webpack-dev-server仅仅在本地开发时才会用到，在生产环境中并不需要它，所以在devDependencies中比较恰当。

为了便捷地启动webpack-dev-server，在package.json中添加一个dev指令

......
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}
......

最后，还需要对webpack-dev-server进行配置。编辑webpack.config.js

const path = require("path");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "main.js",
    },
    mode: "development",
    devServer: {
        // 静态资源目录，如果加上这项配置，需要在工程根目录下创建public目录，并将index.html文件移到此目录中
        static: {
            directory: path.join(__dirname, "public"),
        },
        // 启用压缩
        compress: true,
        // 热更新
        hot: true,
        // 端口
        port: 3000,
        // 自动打开浏览器
        open: true,
    },
};

提示

在webpack.config.js中，通过调用Node.js的路径拼装函数patn.join()，将_dirname（Node.js内置全局变量，值为当前文件所在的绝对路径）与public（静态资源目录）连接起来，得到了最终的静态资源目录。

最后，在启动服务之前，修改以下addContent.js文件

export default function () {
    document.write("use webpack-dev-server!");
}

执行npm run dev命令，浏览器会自动打开，看到最终的效果。

webpack-dev-server工作原理

webpack-dev-server可以看作一个服务者，它的主要工作就是接收浏览器的请求，饭后将资源返回。当服务启动时，它会先让Webpack进行模块打包并将资源准备好（在本工程中就是main.js）。当webpack-dev-server接收到浏览器的资源请求时，它会首先进行URL地址校验。如果该地址是资源服务地址（上面配置的static）,webpack-dev-server就会从Webpack的打包结果中寻找该资源并返回给浏览器。反之，如果请求的地址不属于资源服务地址，则直接读取硬盘中的源文件并将其返回。

提示

直接用Webpack开发和使用webpack-dev-server有一个很大的区别，前者每次都会生成main.js文件，而webpack-dev-server只是将打包结果放在内存中，并不会写入实际的main.js，在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器。这一点可以通过删除工程中dist目录来验证。会发现，即便项目工程中没有main,js文件，刷新页面后，功能仍然是正常的。

源码仓库
https://gitee.com/zero_79152105/webpack-vblog

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-config.html

Webpack入门，项目工程配置说明

使用npm scripts

使用默认目录配置

使用配置文件

使用webpack-dev-server

相关推荐