版本：v3，配置項(xiàng)參考中文文檔，任意webpack相關(guān)配置項(xiàng)均可直接輸入搜索

加入不同配置進(jìn)行項(xiàng)目搭建的示例（稍微簡單的版本）：點(diǎn)此進(jìn)入

package.json

script start配置知識點(diǎn)

1. cross-env：跨平臺設(shè)置(cross-platform-set)環(huán)境變量

script腳本： cross-env NODE_ENV=xxx（注意：NODE_ENV可為任意你想配置的命名，獲取時(shí)一一對應(yīng)即可）

webpack config中通過變量獲取：env = process.env.NODE_ENV

2.webpack-dev-server（注意webpack版本兼容問題）

用于快速開發(fā)，詳見中文文檔

需結(jié)合plugins（插件）： webpack.HotModuleReplacementPlugin() ，詳見中文文檔

相關(guān)腳本：webpack-dev-server?--config webpack.dev.config.js --color --progress --inline --open，對應(yīng)如下：

下圖的config變量配置

--config指定文件所在，其余為需要的配置

webpack

1.webpack-merge?

用于構(gòu)建生產(chǎn)和開發(fā)環(huán)境分離，例：生產(chǎn)環(huán)境的一些配置開發(fā)環(huán)境無需支持（如代碼壓縮等），則可公用一份基礎(chǔ)webpack配置（公用），而開發(fā)與生產(chǎn)不同的配置各寫一份，通過merge合并基礎(chǔ)配置并利用script進(jìn)行環(huán)境變量配置

配置分離

2.devtool（開發(fā)工具）

中文文檔參考，不做詳細(xì)說明

3.plugins（插件）

中文文檔參考

基礎(chǔ)plugins

@清除目標(biāo)文件中重復(fù)的文件的插件：clean-webpack-plugin?，用法如圖

@自動(dòng)生成目標(biāo)入口文件的插件：html-webpack-plugin，無任何配置版的插件效果如下（html中有效）：

無配置版本

示例中的配置解釋（全部配置入口）：

filename：配置生成的html的文件名

template：指定用來生成特定的 html 文件的模板文件（可以是任意格式的模板，不僅僅是html文件，根據(jù)自己所需來配置即可）

inject：注入選項(xiàng)，有四個(gè)值可選，即：配置內(nèi)容需注入到template的哪個(gè)部分

inject可選配置值

（以下為可選配置，即自定義，用法同title）

title：配置生成的html的標(biāo)題

title配置及用法

favicon：給生成的 html 文件生成一個(gè) favicon。屬性值為 favicon 文件所在的路徑名。

@css等樣式相關(guān)的處理插件?：extract-text-webpack-plugin

為抽離css樣式，防止將樣式打包在js中引起頁面樣式加載錯(cuò)亂的現(xiàn)象，用法見下下圖

plugins中

use：指需要什么樣的loader去編譯文件，這里由于源文件是.css所以選擇css-loader

fallback：編譯后用什么loader來提取css文件

publicfile：用來覆蓋項(xiàng)目路徑，生成該css文件的文件路徑

@創(chuàng)建一個(gè)在編譯時(shí)可以配置的全局常量：DefinePlugin（js中有效、html及樣式無效）

4.多入口文件

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 除去在path指定的目錄中生成文件外，? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?還會(huì)將此兩個(gè)入口的js作為script標(biāo)簽直接注入到template指定的inject位置template與inject均為配置項(xiàng)，見上圖）

output配置屬性值

[name].[hash:5].js：name為entry的屬性名稱，hash為唯一哈希值（取5位）

5.resolve

@別名：alias（html中無效、js及css中有效）

創(chuàng)建?import?或?require?的別名，來確保模塊引入變得更簡單

6.loaders

style-loader：更多用法，見文檔

style-loader

sass-loader：更多信息，詳見文檔

css-loader：更多信息，見css-loader文檔

url-loader：詳見文檔

file-loader：詳見文檔

7.babel配置及依賴

中文文檔地址