1. 默认的配置文件

在文件根目录下创建：

touch webpack.config.js

webpack.config.js

// webpack 配置文件
const path = require('path'); // node.js 的路径模块
module.exports = {
  // entry: './src/index.js', // 入口文件（简写形式）
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包后的路径
    filename: 'bundle.js', // 打包后的文件名
  }
}

以上是简单的打包配置，配置项包括入口文件、打包路径、打包文件名。

其中，入口文件是指一个项目的主文件，一般来说，所有的模块都会被加入到这个文件中，类似于 vue-cli 中的 main.js 文件。

之后，运行 npx webpack，即可按照此配置文件进行打包。

2. 自定义的配置文件

现在，如果我们并没有将配置文件设置为默认的 webpack.config.js，

而是使用了其他的名字，例如：my-webpack-config.js，

在这种情况下，我们该如何以这个自定义的配置文件作为配置的标准来打包呢？

通过以下命令即可：

npx webpack --config my-webpack-config.js

运行结果如下：

3. 简化打包流程

以上，我们都是通过手动的 npx webpack 来打包的！

实际上，还可以利用 package.json 中的 scripts 字段来编写运行脚本，通过脚本进行打包。

// ...
"scripts": {
  "bundle": "webpack"
},
// ...

之后，通过 npm run bundle 就可以打包了。

疑惑：为什么 "bundle" 后面不写成："npx webpack" 呢？

原因在于，当你运行 npm run bundle 时，它会先去 node_modules 文件夹中去找是否安装了 webpack 这个指令，如果有就会执行了，相当于被翻译成了 webpack 这个命令。这个与 npx webpack 是类似的，但并不是相等的，本文前面有叙述过，请自行查找~

（也就是看 node_modules 中的 webpack 下的 bin 中是否有对应的可执行指令文件，这块需要了解 Node.js 的内容，此篇不论。）

参考：webpack.js.org/guides/gett…

4. 打包模式

每次打包完，打包内容中总有一段 WARNING 警告，提醒我们设置打包模式（mode）。

默认情况下，它被设置为 'production'，我们也可以自行配置：

、

// webpack.config.js
const path = require('path');
module.exports = {
  mode: 'development', // 'development' | 'production'
  // entry: './src/index.js',
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

可以配置为开发模式或者生产模式：

• 开发模式：本地环境
• 生产模式：线上环境（代码是压缩的）

具体有何不同，在打包后，打开 dist 文件夹下的 main.js，便可一目了然，此处不再赘述。

小结

以上，是本篇的所有内容。 最后回答一下前言部分的问题：

• 为什么会使用 Webpack？模块化、预处理。
• Webpack 打包流程：确保存在 package.json 的情况下去打包，注意配置项的设置。
• Webpack 的本源：模块打包器，记住是模块。
• Webpack 的配置文件：webpack.config.js，配置项：mode/entry/output
• 简化 Webpack 打包流程：设置 package.json 中的 scripts 字段。

添加我的微信：enjoy_Mr_cat，共同成长，卷卷群里等你 🤪。

以上，感谢您的阅读～