webpack.png
Webpack 是一個(gè)前端資源加載/打包工具奕巍。
它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析
然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源(一個(gè)靜態(tài)文件)颓遏，
從而減少了頁(yè)面請(qǐng)求。
安裝 Webpack
npm install webpack -g
"假如介意npm安裝速度改成cnpm（切換成淘寶鏡像源:npm install -g cnpm --registry=https://registry.npm.taobao.org）"
配置文件
創(chuàng)建 webpack.config.js 文件较幌，代碼如下所示：
//這是一個(gè) [Node.js 核心模塊](https://nodejs.org/api/modules.html)妻味，用于操作文件路徑
const path = require('path');
// 通過(guò) npm 安裝,為應(yīng)用程序生成一個(gè) HTML 文件，并自動(dòng)注入所有生成的 bundle瓷式。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//entry 指示 webpack 應(yīng)該使用哪個(gè)模塊,默認(rèn)值是 `./src/index.js`替饿，
//你可以通過(guò)在 [webpack configuration](https://webpack.docschina.org/configuration) 中配置 `entry` 屬性
//來(lái)指定一個(gè)（或多個(gè)）不同的入口起點(diǎn)
entry: "./src/index.js",
//output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件贸典。
//主要輸出文件的默認(rèn)值是 ./dist/main.js视卢，其他生成文件默認(rèn)放置在 ./dist 文件夾中。
//我們通過(guò) output.filename 和 output.path 屬性廊驼，來(lái)告訴 webpack bundle 的名稱(chēng)据过，以及我們想要 bundle 生成到哪里。
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
//webpack 開(kāi)箱可用的自帶能力即只能理解 JavaScript 和 JSON 文件
//loader讓 webpack 能夠去處理其他類(lèi)型的文件妒挎，并將它們轉(zhuǎn)換為有效 [模塊](https://webpack.docschina.org/concepts/modules)
module: {
loaders: [
{
//'/\.css$/' 或 "/\.css$/" 不一樣绳锅。
//前者指示 webpack 匹配任何以 .css結(jié)尾的文件，
//后者指示 webpack 匹配具有絕對(duì)路徑 '.css' 的單個(gè)文件酝掩。
test: /\.css$/, //識(shí)別出哪些文件會(huì)被轉(zhuǎn)換
loader: "style-loader!css-loader" //定義出在進(jìn)行轉(zhuǎn)換時(shí)鳞芙，應(yīng)該使用哪個(gè) loader
}
]
},
//想要使用一個(gè)插件，你只需要 require() 它期虾，然后把它添加到 plugins 數(shù)組中
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
],
//提供 mode 配置選項(xiàng)['production','development','none']原朝，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化
//模式相關(guān)配置詳情請(qǐng)參考:https://webpack.docschina.org/configuration/mode/
mode: 'production' // 默認(rèn)模式
};
