上一級(jí)使用 webpack 及其 loader 對(duì)前端代碼進(jìn)行構(gòu)建的方法還不夠簡(jiǎn)單乾戏，缺點(diǎn)如下蹬挺。
- 每次構(gòu)建都需要指定項(xiàng)目的入口文件（./index.js）與輸出文件（./bundle.js）
- 使用 loader 都需要 xxx! 的形式，意味著每個(gè)有 require CSS 資源的地方红且，都需要寫 require('style!css!./index.css');
使用配置文件進(jìn)行優(yōu)化：webpack 支持 Node.js 模塊格式的配置文件括细，默認(rèn)回使用當(dāng)前目錄下的 webpack.config.js棕硫，配置文件只需要 export 的一個(gè)配置信息對(duì)象即可骏庸。
module.exports = {
// configuration
// 項(xiàng)目入口文件
entry: ,
// 構(gòu)建的輸出結(jié)果描述，本身是一個(gè)對(duì)象年叮，包括多個(gè)字段具被，比較重要的如下
output: {
// 輸出目錄
path: ,
// 輸出文件名
filename: ,
// 輸出目錄所對(duì)應(yīng)的外部路徑（從瀏覽器中訪問(wèn)）
publicPath:
}
}
其中 publicPath 是一個(gè)很容易被忽略但是很重要的配置，它表示構(gòu)建最終結(jié)果被訪問(wèn)時(shí)的路徑
一個(gè)常見(jiàn)的前端構(gòu)建上線的過(guò)程是：
配置構(gòu)建輸出目錄 dist只损，構(gòu)建完成后對(duì) dist 目錄進(jìn)行打包一姿，然后將其內(nèi)容（結(jié)果文件往往會(huì)不止一個(gè)）發(fā)布到 CDN 上七咧。比如 dist/bundle.js，假設(shè)它最終發(fā)布地址為 http://cdn.example.com/static/bundle.js叮叹，則這里的 publicPath 應(yīng)當(dāng)取輸出目錄（dist/）所對(duì)應(yīng)的線上路徑艾栋，即 http://cdn.example.com/static/。在我們的演示項(xiàng)目中蛉顽，直接通過(guò)相對(duì)路徑訪問(wèn)靜態(tài)資源蝗砾，不涉及打包上線 CDN 的過(guò)程，所以不做配置携冤。
對(duì)于之前的例子悼粮，配置文件（webpack.config.js，__dirname內(nèi)置變量曾棕，指當(dāng)前工作目錄）如下：
var path = require("path");
module.exports = {
entry: path.join(__dirname, "index"),
output: {
filename: "bundle.js",
path: __dirname
},
module: {
loaders: [
{test: /\.css$/, loaders: ["style-loader", "css-loader"]}
]
}
};
module.loaders 是對(duì)于模塊中的 loader 使用的配置扣猫，值為一個(gè)數(shù)組。數(shù)組的每一項(xiàng)指定一個(gè)規(guī)則翘地，規(guī)則的 test 字段是正則表達(dá)式申尤，若被依賴的模塊的 ID 符合正則表達(dá)式，則對(duì)依賴模塊依次使用規(guī)則中 loaders 字段所指定的 loader 進(jìn)行轉(zhuǎn)換衙耕。
在這里我們配置了對(duì)所有符合/.css$/昧穿，即后綴名為 .css 的資源使用 style-loader 與 css-loader，這樣在 JavaScritp 代碼中 require CSS 模塊的時(shí)候就不用每次都寫一遍 style!css! 了臭杰，只需要像依賴 JavaScript 模塊寫成
require('./index.css');
這樣每次構(gòu)建的時(shí)候也不需要手動(dòng)指定入口文件和輸出文件了粤咪，直接在項(xiàng)目的目錄下執(zhí)行：
webpack
webpack 會(huì)默認(rèn)從 webpack.config.js 中獲取配置信息，并執(zhí)行構(gòu)建過(guò)程渴杆。
