# `webpack`配置文件
`webpack`的配置项除了`--output`和`--mode`之外还有非常多的选项。官方也提供了一个更简便的方式来进行操作。
## 配置文件
在项目根目录上新建`webpack.config.js`
~~~
const path = require('path');
module.exports = {
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
~~~
我们利用`path.join(__dirname,'path')`将文件的入口文件变为绝对地址。将输出文件地址也改为绝对地址。这样更利于管理。
相应的`npm scripts`也要做一些修改`"start": "webpack --config webpack.config.js"`或者`"start": "webpack"`完整的文件如下。
~~~
{
"name": "demo1",
"version": "1.0.0",
"scripts": {
"start": "webpack --config webpack.config.js"
},
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
~~~
## 执行命令
`npm start`那么会执行`webpack --config webpack.config.js`那么上面的代码的执行顺序为`webpack`读取到`webconfig.js``的配置就可以得知具体的事务`。
## 项目源码
`git clone https://github.com/highh5/webpack.git -b lesson-03`
