小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
经过上一章节的准备 juejin.cn/post/702133… 我们可以开始准备配置啦！
配置开始
准备工作完毕了，就要开始配置webpack.config.js了
为啥要配置这个呢？
拒绝 黑人问号❓
因为在 webpack 命令执行过程中，会从当前路径读取 webpack.config.js 的配置信息，如果我们的 webpack.config.js 文件是空的，没有 output.filename 这个配置项，就会提示 'output.filename' 这个配置项是必须的。
先来一个最简单的 webpack.config.js：
webpack.config.js
module.exports = {
/* webpack 入口起点*/
entry: './index.js',
/* webpack 输出*/
output: {
//输出文件名
filename: './test.js'
}
}
根据我们的配置，webpack会去寻找 index.js文件，并输出test.js文件，目前还没有 index.js文件 先创建一下吧:
index.js
const test = 123
目前 我们的入口文件做的事情很简单，仅仅是定义了一个 test 变量。
现在我们的文件目录结构是这样的：
然后我们就可以在控制台敲下 webpack了
但是 报错来了
WARNING in configuration
The 'mode' option has not been set,
webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable
defaults for each environment.
You can also set it to 'none' to disable any default behavior.
Learn more: https://webpack.js.org/configuration/mode/
头大有木有？
没事，我们在 webpack.config.js 下加点东西
webpack.config.js
module.exports = {
/* webpack 入口起点*/
entry: './index.js',
/* webpack 输出*/
output: {
//输出文件名
filename: './test.js'
},
mode: 'development'
}
然后在 package.json 下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
万事大吉：
如在打包的时候还报以下错误：
工程目录下直接运行如下代码 ：
npm install webpack --save-dev
就OK啦！本小节结束！
