webpack.config.js
下一步是创建一个 webpack.config.js 文件,通过它告诉 Webpack 应该如何处理我们的代码。
// webpack.config.js
'use strict';
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.js'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'cheap-eval-source-map' : false,
};
return config;
};
如你所见,从 Webpack 开始并不需要太多配置。唯一需要的两个选项是 entry 和 target。我们用 entry 字段声明程序的入口点,告诉 Webpack 在 Node.js 中使用 target 字段。
可以用 mode 字段告诉 Webpack 它应该关注编译速度(开发)还是混淆和缩小(生产)。为了帮助调试,需要在开发模式中运行,用 devtool 字段来指示我们想要源映射。这样,如果出现错误,可以很容易地在代码中找到它出现的位置。
要使用 Webpack,需要创建一些 npm 命令:
// package.json
...
"scripts": {
"start": "webpack --progress --env.development",
"start:prod": "webpack --progress"
},
...
现在可以通过运行这些命令来构建程序。它将创建一个目录 dist/,其中包含输出文件 main.js 。可以用 webpack.config.js 中的 output configuration 指定一个不同的名称。
我们的项目现在应该是这样的:
dist/
main.js
node_modules/
src/
information_logger.js
main.js
package-lock.json
package.json
webpack.config.jsnodemon
你可能已经注意到,在运行启动命令后,Webpack 会在构建应用程序后停止。它不会监视我们对的文件所所做的改动。由于我们正在使用 Node.js,所以无法用 webpack-dev-server。
幸运的是可以用 nodemon 来解决这个问题。它是专门为这个目的而开发的工具:在开发期间重新启动 Node.js 应用程序。
让我们从安装 nodemon-webpack-plugin开始。不要忘记 -D 标志,因为它是一个 devDependency。
npm i -D nodemon-webpack-plugin让我们创建一个新的 nodemon 标志,并将插件添加到的 webpack.config.js 中。
// webpack.config.js
'use strict';
const NodemonPlugin = require('nodemon-webpack-plugin');
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.js'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'cheap-eval-source-map' : false,
resolve: { // tells Webpack what files to watch.
modules: ['node_modules', 'src', 'package.json'],









