使用webpack配置文件（webpack.config.js）
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代前一篇使用 CLI 选项方式的配置文件：
webpack1.0
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
dist/index.html
<!doctype html>
<html>
<head>
<title>webpack 1.0</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<!--<script src="./src/index.js"></script>-->
<script src="bundle.js"></script> （绑定打包后的文件，需对应）
</body>
</html>
通过新配置文件再次执行构建：
构建成功
注意，当在 windows 中通过调用路径去调用 webpack 时，必须使用反斜线。例如
node_modules\.bin\webpack --config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。
升级：
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本（如果必要，每个 flag 都带有 --config 标志）。
构建成功
好了，基本构建已经完了，现在我的项目目录是这样的：
webpack1.0目录
网友评论