webpack.config

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

新建一個(gè)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"
        }]
    }
}

現(xiàn)在我們僅僅需要運(yùn)行：webpack 就ok了。

now let's do some changes in css file:

#app{
    color: lightblue;
}

在命令行敲：webpack.

Refresh your browser and see the changes in the document.

具體參數(shù)

• ==entry==：指入口文件的配置項(xiàng)，它是一個(gè)數(shù)組的原因是webpack允許多個(gè)入口點(diǎn)。 當(dāng)然如果你只有一個(gè)入口的話，也可以直接使用雙引號(hào)"./entry.js"
• ==output==：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱
• ==module==：定義了對(duì)模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)調(diào)用后面的loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。