Webpack配置文件

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

继续我们的案例，在根目录创建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"

    }

}

# 如果没有写入权限，请尝试如下代码更改权限chflags -R nouchg .sudochmod775package.json

别忘了运行npm install。

然后创建一个配置文件webpack.config.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"

    }

}

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

require('./style.css')

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