# `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`
