在前面介绍如何创建一个 bundle 文件时，我们直接在终端输入命令，打包了一个 bundle 文件，但是大多项目需要复杂的设置，若仍使用终端输入命令，会很麻烦页很难维护。此时，配置文件就显得尤为重要了。
我们在项目根目录下新建一个 webpack.config.js 配置文件。
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
**tips: **
- 如果项目中存在 webpack.config.js，则 webpack 命令将默认选择使用它。
修改 package.json 加上脚本。 - 整个配置中我们使用 Node 内置的 path 模块，并且加上了 __dirname 这个全集变量。以防止不同操作系统之间的文件路径问题，并且可以是相对路径按照预期工作。
更多具体配置我们在以后会讲到。
添加 npm 脚本
// package.json
"scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js"
}
关于 npm 脚本，可以看看 npm scripts 使用指南。
将 index.html 引入的就是文件换成我们打包指定输出的文件名 bundle.js。
// dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
然后在终端运行 webpack 配置文件。
yarn run build
网友评论