Webpack 在執(zhí)行的時候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認情況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者通過 --config 選項來指定配置文件。

繼續(xù)我們的案例，在根目錄創(chuàng)建 package.json 來添加 webpack 需要的依賴：

{
  "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"
  }
}

# 如果沒有寫入權(quán)限，請嘗試如下代碼更改權(quán)限
chflags -R nouchg .
sudo chmod  775 package.json

別忘了運行 npm install。

然后創(chuàng)建一個配置文件 webpack.config.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 加載方式：

require('./style.css')

最后運行 webpack，可以看到 webpack 通過配置文件執(zhí)行的結(jié)果和上一章節(jié)通過命令行 webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' 執(zhí)行的結(jié)果是一樣的。