# 配置文件
Webpack 在執行的時候,除了在命令行傳入參數,還可以通過指定的配置文件來執行。默認情況下,會搜索當前目錄的 `webpack.config.js` 文件,這個文件是一個 node.js 模塊,返回一個 json 格式的配置信息對象,或者通過 `--config` 選項來指定配置文件。
繼續我們的案例,在根目錄創建 `package.json` 來添加 webpack 需要的依賴:
```js
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}
```
```bash
# 如果沒有寫入權限,請嘗試如下代碼更改權限
chflags -R nouchg .
sudo chmod 775 package.json
```
別忘了運行 `npm install`。
然后創建一個配置文件 `webpack.config.js`:
```js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
```
同時簡化 `entry.js` 中的 `style.css` 加載方式:
```js
require('./style.css')
```
最后運行 `webpack`,可以看到 webpack 通過配置文件執行的結果和上一章節通過命令行 `webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'` 執行的結果是一樣的。