配置文件

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：

  1. {
  2.   "name": "webpack-example",
  3.   "version": "1.0.0",
  4.   "description": "A simple webpack example.",
  5.   "main": "bundle.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [
  10.     "webpack"
  11.   ],
  12.   "author": "zhaoda",
  13.   "license": "MIT",
  14.   "devDependencies": {
  15.     "css-loader": "^0.21.0",
  16.     "style-loader": "^0.13.0",
  17.     "webpack": "^1.12.2"
  18.   }
  19. }
  1. # 如果没有写入权限，请尝试如下代码更改权限
  2. chflags -R nouchg .
  3. sudo chmod  775 package.json

别忘了运行 npm install。

然后创建一个配置文件 webpack.config.js：

  1. var webpack = require('webpack')
  3. module.exports = {
  4.   entry: './entry.js',
  5.   output: {
  6.     path: __dirname,
  7.     filename: 'bundle.js'
  8.   },
  9.   module: {
  10.     loaders: [
  11.       {test: /\.css$/, loader: 'style-loader!css-loader'}
  12.     ]
  13.   }
  14. }

同时简化 entry.js 中的 style.css 加载方式：

  1. require('./style.css')

最后运行 webpack，可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' 执行的结果是一样的。