寫在前面的話

閱讀本文之前棒假，先看下面這個(gè)webpack的配置文件墩蔓，如果每一項(xiàng)你都懂，那本文能帶給你的收獲也許就比較有限评抚，你可以快速瀏覽或直接跳過镀首；如果你和十天前的我一樣坟漱，對(duì)很多選項(xiàng)存在著疑惑，那花一段時(shí)間慢慢閱讀本文更哄，你的疑惑一定一個(gè)一個(gè)都會(huì)消失芋齿；如果你以前沒怎么接觸過Webpack，而你又你對(duì)webpack感興趣成翩，那么動(dòng)手跟著本文中那個(gè)貫穿始終的例子寫一次觅捆，寫完以后你會(huì)發(fā)現(xiàn)你已明明白白的走進(jìn)了Webpack的大門。

// 一個(gè)常見的`webpack`配置文件constwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');constExtractTextPlugin =require('extract-text-webpack-plugin');module.exports = {entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/build",filename:"bundle-[hash].js"},devtool:'none',devServer: {contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true,hot:true},module: {rules: [{test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/}, {test:/\.css$/,use: ExtractTextPlugin.extract({fallback:"style-loader",use: [{loader:"css-loader",options: {modules:true,localIdentName:'[name]__[local]--[hash:base64:5]'}? ? ? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}],? ? ? ? ? ? ? ? ? ? })? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有麻敌，翻版必究'),newHtmlWebpackPlugin({template: __dirname +"/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例栅炒，并傳入相關(guān)的參數(shù)}),newwebpack.optimize.OccurrenceOrderPlugin(),newwebpack.optimize.UglifyJsPlugin(),newExtractTextPlugin("style.css")? ? ]};

什么是WebPack，為什么要使用它术羔？

為什要使用WebPack

現(xiàn)今的很多網(wǎng)頁(yè)其實(shí)可以看做是功能豐富的應(yīng)用赢赊，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡(jiǎn)化開發(fā)的復(fù)雜度聂示，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法

模塊化域携，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;

類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語(yǔ)言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能轉(zhuǎn)換為JavaScript文件使瀏覽器可以識(shí)別鱼喉；

Scss，less等CSS預(yù)處理器

...

這些改進(jìn)確實(shí)大大的提高了我們的開發(fā)效率趋观，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識(shí)別,而手動(dòng)處理又是非常繁瑣的扛禽，這就為WebPack類的工具的出現(xiàn)提供了需求。

什么是Webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是皱坛，分析你的項(xiàng)目結(jié)構(gòu)编曼，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等）剩辟，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用掐场。

WebPack和Grunt以及Gulp相比有什么特性

其實(shí)Webpack和另外兩個(gè)并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具贩猎，而WebPack是一種模塊化的解決方案熊户，不過Webpack的優(yōu)點(diǎn)使得Webpack在很多場(chǎng)景下可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個(gè)配置文件中吭服，指明對(duì)某些文件進(jìn)行類似編譯嚷堡，組合，壓縮等任務(wù)的具體步驟艇棕，工具之后可以自動(dòng)替你完成這些任務(wù)蝌戒。

Grunt和Gulp的工作流程

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體串塑，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件北苟，使用loaders處理它們桩匪，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。

Webpack工作方式

如果實(shí)在要把二者進(jìn)行比較友鼻，Webpack的處理速度更快更直接吸祟，能打包更多不同類型的文件。

開始使用Webpack

初步了解了Webpack工作方式后桃移，我們一步步的開始學(xué)習(xí)使用Webpack屋匕。

安裝

Webpack可以使用npm安裝，新建一個(gè)空的練習(xí)文件夾（此處命名為webpack sample project）借杰，在終端中轉(zhuǎn)到該文件夾后執(zhí)行下述指令就可以完成安裝过吻。

//全局安裝npm install -g webpack//安裝到你的項(xiàng)目目錄npm install --save-dev webpack

正式使用Webpack前的準(zhǔn)備

在上述練習(xí)文件夾中創(chuàng)建一個(gè)package.json文件，這是一個(gè)標(biāo)準(zhǔn)的npm說明文件蔗衡，里面蘊(yùn)含了豐富的信息纤虽，包括當(dāng)前項(xiàng)目的依賴模塊，自定義的腳本任務(wù)等等绞惦。在終端中使用npm init命令可以自動(dòng)創(chuàng)建這個(gè)package.json文件

npm init

輸入這個(gè)命令后逼纸，終端會(huì)問你一系列諸如項(xiàng)目名稱，項(xiàng)目描述济蝉，作者等信息杰刽，不過不用擔(dān)心，如果你不準(zhǔn)備在npm中發(fā)布你的模塊王滤，這些問題的答案都不重要贺嫂，回車默認(rèn)即可。

package.json文件已經(jīng)就緒雁乡，我們?cè)诒卷?xiàng)目中安裝Webpack作為依賴包

// 安裝Webpacknpm install --save-dev webpack

回到之前的空文件夾第喳，并在里面創(chuàng)建兩個(gè)文件夾,app文件夾和public文件夾，app文件夾用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊踱稍，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個(gè)index.html文件）曲饱。接下來我們?cè)賱?chuàng)建三個(gè)文件:

index.html--放在public文件夾中;

Greeter.js-- 放在app文件夾中;

main.js-- 放在app文件夾中;

此時(shí)項(xiàng)目結(jié)構(gòu)如下圖所示

項(xiàng)目結(jié)構(gòu)

我們?cè)?b>index.html文件中寫入最基礎(chǔ)的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js珠月，之后我們還會(huì)詳細(xì)講述）扩淀。

Webpack Sample Project

我們?cè)贕reeter.js中定義一個(gè)返回包含問候信息的html元素的函數(shù),并依據(jù)CommonJS規(guī)范導(dǎo)出這個(gè)函數(shù)為一個(gè)模塊：

// Greeter.jsmodule.exports =function(){vargreet =document.createElement('div');? greet.textContent ="Hi there and greetings!";returngreet;};

main.js文件中我們寫入下述代碼，用以把Greeter模塊返回的節(jié)點(diǎn)插入頁(yè)面桥温。

//main.js constgreeter =require('./Greeter.js');document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack可以在終端中使用引矩，在基本的使用方法如下：

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，# {destination for bundled file}處填寫打包文件的存放路徑# 填寫路徑的時(shí)候不用添加{}webpack {entry file} {destinationforbundled file}

指定入口文件后旺韭，webpack將自動(dòng)識(shí)別項(xiàng)目所依賴的其它文件氛谜，不過需要注意的是如果你的webpack不是全局安裝的，那么當(dāng)你在終端中使用此命令時(shí)区端，需要額外指定其在node_modules中的地址值漫，繼續(xù)上面的例子，在終端中輸入如下命令

# webpack非全局安裝的情況node_modules/.bin/webpack app/main.js public/bundle.js

結(jié)果如下

使用命令行打包

可以看出webpack同時(shí)編譯了main.js和Greeter,js,現(xiàn)在打開index.html,可以看到如下結(jié)果

htmlResult1

有沒有很激動(dòng)织盼，已經(jīng)成功的使用Webpack打包了一個(gè)文件了杨何。不過在終端中進(jìn)行復(fù)雜的操作，其實(shí)是不太方便且容易出錯(cuò)的沥邻，接下來看看Webpack的另一種更常見的使用方法危虱。

通過配置文件來使用Webpack

Webpack擁有很多其它的比較高級(jí)的功能（比如說本文后面會(huì)介紹的loaders和plugins），這些功能其實(shí)都可以通過命令行模式實(shí)現(xiàn)唐全，但是正如前面提到的埃跷，這樣不太方便且容易出錯(cuò)的，更好的辦法是定義一個(gè)配置文件邮利，這個(gè)配置文件其實(shí)也是一個(gè)簡(jiǎn)單的JavaScript模塊弥雹，我們可以把所有的與打包相關(guān)的信息放在里面。

繼續(xù)上面的例子來說明如何寫這個(gè)配置文件延届，在當(dāng)前練習(xí)文件夾的根目錄下新建一個(gè)名為webpack.config.js的文件剪勿，我們?cè)谄渲袑懭肴缦滤镜暮?jiǎn)單配置代碼，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑方庭。

module.exports= {? entry:? __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {? ? path: __dirname +"/public",//打包后的文件存放的地方filename:"bundle.js"http://打包后輸出文件的文件名}}

注：“__dirname”是node.js中的一個(gè)全局變量厕吉，它指向當(dāng)前執(zhí)行腳本所在的目錄。

有了這個(gè)配置之后二鳄，再打包文件赴涵，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)订讼，示例如下：

配合配置文件進(jìn)行打包

又學(xué)會(huì)了一種使用Webpack的方法，這種方法不用管那煩人的命令行參數(shù)扇苞，有沒有感覺很爽欺殿。如果我們可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會(huì)不會(huì)更爽~鳖敷，繼續(xù)看下文脖苏。

更快捷的執(zhí)行打包任務(wù)

在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑其實(shí)是比較煩人的，不過值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行定踱，對(duì)npm進(jìn)行配置后可以在命令行中使用簡(jiǎn)單的npm start命令來替代上面略微繁瑣的命令棍潘。在package.json中對(duì)scripts對(duì)象進(jìn)行相關(guān)設(shè)置即可，設(shè)置方法如下。

{"name":"webpack-sample-project","version":"1.0.0","description":"Sample webpack project","scripts": {"start":"webpack"http:// 修改的是這里亦歉，JSON文件不支持注釋恤浪，引用時(shí)請(qǐng)清除? },"author":"zhang","license":"ISC","devDependencies": {"webpack":"3.10.0"}}

注：package.json中的script會(huì)安裝一定順序?qū)ふ颐顚?duì)應(yīng)位置，本地的node_modules/.bin路徑就在這個(gè)尋找清單中肴楷，所以無論是全局還是局部安裝的Webpack水由，你都不需要寫前面那指明詳細(xì)的路徑了。

npm的start命令是一個(gè)特殊的腳本名稱赛蔫，其特殊性表現(xiàn)在砂客，在命令行中使用npm start就可以執(zhí)行其對(duì)于的命令，如果對(duì)應(yīng)的此腳本名稱不是start呵恢，想要在命令行中運(yùn)行時(shí)鞠值，需要這樣用npm run {script name}如npm run build，我們?cè)诿钚兄休斎雗pm start試試渗钉，輸出結(jié)果如下：

使用npm start 打包代碼

現(xiàn)在只需要使用npm start就可以打包文件了彤恶，有沒有覺得webpack也不過如此嘛，不過不要太小瞧webpack晌姚，要充分發(fā)揮其強(qiáng)大的功能我們需要修改配置文件的其它選項(xiàng)粤剧，一項(xiàng)項(xiàng)來看。

Webpack的強(qiáng)大功能

生成Source Maps（使調(diào)試更容易）

開發(fā)總是離不開調(diào)試挥唠，方便的調(diào)試能極大的提高開發(fā)效率抵恋，不過有時(shí)候通過打包后的文件，你是不容易找到出錯(cuò)了的地方宝磨，對(duì)應(yīng)的你寫的代碼的位置的弧关，Source Maps就是來幫我們解決這個(gè)問題的。

通過簡(jiǎn)單的配置唤锉，webpack就可以在打包時(shí)為我們生成的source maps世囊，這為我們提供了一種對(duì)應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高窿祥，也更容易調(diào)試株憾。

在webpack的配置文件中配置source maps，需要配置devtool晒衩，它有以下四種不同的配置選項(xiàng)嗤瞎，各具優(yōu)缺點(diǎn)，描述如下：

devtool選項(xiàng)配置結(jié)果

source-map在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)完整且功能完全的文件听系。這個(gè)文件具有最好的source map贝奇，但是它會(huì)減慢打包速度；

cheap-module-source-map在一個(gè)單獨(dú)的文件中生成一個(gè)不帶列映射的map靠胜，不帶列映射提高了打包速度掉瞳，但是也使得瀏覽器開發(fā)者工具只能對(duì)應(yīng)到具體的行毕源，不能對(duì)應(yīng)到具體的列（符號(hào)），會(huì)對(duì)調(diào)試造成不便陕习；

eval-source-map使用eval打包源文件模塊霎褐，在同一個(gè)文件中生成干凈的完整的source map。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的sourcemap衡查，但是對(duì)打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患瘩欺。在開發(fā)階段這是一個(gè)非常好的選項(xiàng)，在生產(chǎn)階段則一定不要啟用這個(gè)選項(xiàng)拌牲；

cheap-module-eval-source-map這是在打包文件時(shí)最快的生成source map的方法俱饿，生成的Source Map會(huì)和打包后的JavaScript文件同行顯示，沒有列映射塌忽，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)拍埠；

正如上表所述，上述選項(xiàng)由上到下打包速度越來越快土居，不過同時(shí)也具有越來越多的負(fù)面作用枣购，較快的打包速度的后果就是對(duì)打包后的文件的的執(zhí)行有一定影響。

對(duì)小到中型的項(xiàng)目中擦耀，eval-source-map是一個(gè)很好的選項(xiàng)棉圈，再次強(qiáng)調(diào)你只應(yīng)該開發(fā)階段使用它，我們繼續(xù)對(duì)上文新建的webpack.config.js眷蜓，進(jìn)行如下配置:

module.exports= {? devtool:'eval-source-map',? entry:? __dirname +"/app/main.js",? output: {? ? path: __dirname +"/public",? ? filename:"bundle.js"}}

cheap-module-eval-source-map方法構(gòu)建速度更快分瘾，但是不利于調(diào)試，推薦在大型項(xiàng)目考慮時(shí)間成本時(shí)使用吁系。

使用webpack構(gòu)建本地服務(wù)器

想不想讓你的瀏覽器監(jiān)聽你的代碼的修改德召，并自動(dòng)刷新顯示修改后的結(jié)果，其實(shí)Webpack提供一個(gè)可選的本地開發(fā)服務(wù)器汽纤，這個(gè)本地服務(wù)器基于node.js構(gòu)建上岗，可以實(shí)現(xiàn)你想要的這些功能，不過它是一個(gè)單獨(dú)的組件蕴坪，在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴

npm install --save-dev webpack-dev-server

devserver作為webpack配置選項(xiàng)中的一項(xiàng)肴掷，以下是它的一些配置選項(xiàng)，更多配置可參考這里

devserver的配置選項(xiàng)功能描述

contentBase默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器背传，如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器捆等，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"目錄）

port設(shè)置默認(rèn)監(jiān)聽端口，如果省略续室，默認(rèn)為”8080“

inline設(shè)置為true，當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁(yè)面

historyApiFallback在開發(fā)單頁(yè)應(yīng)用時(shí)非常有用谒养，它依賴于HTML5 history API挺狰，如果設(shè)置為true明郭，所有的跳轉(zhuǎn)將指向index.html

把這些命令加到webpack的配置文件中，現(xiàn)在的配置文件webpack.config.js如下所示

module.exports= {? devtool:'eval-source-map',? entry:? __dirname +"/app/main.js",? output: {? ? path: __dirname +"/public",? ? filename:"bundle.js"},? devServer: {? ? contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true//實(shí)時(shí)刷新} }

在package.json中的scripts對(duì)象中添加如下命令丰泊，用以開啟本地服務(wù)器：

"scripts": {"test":"echo \"Error: no test specified\" && exit 1","start":"webpack","server":"webpack-dev-server --open"},

在終端中輸入npm run server即可在本地的8080端口查看結(jié)果

開啟本地服務(wù)器

Loaders

鼎鼎大名的Loaders登場(chǎng)了薯定！

Loaders是webpack提供的最激動(dòng)人心的功能之一了。通過使用不同的loader瞳购，webpack有能力調(diào)用外部的腳本或工具话侄，實(shí)現(xiàn)對(duì)不同格式的文件的處理，比如說分析轉(zhuǎn)換scss為css学赛，或者把下一代的JS文件（ES6年堆，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件，對(duì)React的開發(fā)而言盏浇，合適的Loaders可以把React的中用到的JSX文件轉(zhuǎn)換為JS文件变丧。

Loaders需要單獨(dú)安裝并且需要在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置包括以下幾方面：

test：一個(gè)用以匹配loaders所處理文件的拓展名的正則表達(dá)式（必須）

loader：loader的名稱（必須）

include/exclude:手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）绢掰；

query：為loaders提供額外的設(shè)置選項(xiàng)（可選）

不過在配置loader之前痒蓬，我們把Greeter.js里的問候消息放在一個(gè)單獨(dú)的JSON文件里,并通過合適的配置使Greeter.js可以讀取該JSON文件的值，各文件修改后的代碼如下：

在app文件夾中創(chuàng)建帶有問候信息的JSON文件(命名為config.json)

{"greetText":"Hi there and greetings from JSON!"}

更新后的Greeter.js

varconfig =require('./config.json');module.exports =function(){vargreet =document.createElement('div');? greet.textContent = config.greetText;returngreet;};

注由于webpack3.*/webpack2.*已經(jīng)內(nèi)置可處理JSON文件滴劲，這里我們無需再添加webpack1.*需要的json-loader攻晒。在看如何具體使用loader之前我們先看看Babel是什么？

Babel

Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái)班挖，它可以編譯代碼幫你達(dá)到以下目的：

讓你能使用最新的JavaScript代碼（ES6鲁捏，ES7...），而不用管新標(biāo)準(zhǔn)是否被當(dāng)前使用的瀏覽器完全支持聪姿；

讓你能使用基于JavaScript進(jìn)行了拓展的語(yǔ)言碴萧，比如React的JSX；

Babel的安裝與配置

Babel其實(shí)是幾個(gè)模塊化的包末购，其核心功能位于稱為babel-core的npm包中破喻，webpack可以把其不同的包整合在一起使用，對(duì)于每一個(gè)你需要的功能或拓展盟榴，你都需要安裝單獨(dú)的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）曹质。

我們先來一次性安裝這些依賴包

// npm一次性安裝多個(gè)依賴模塊，模塊之間用空格隔開

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下:

module.exports= {? ? entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {? ? ? ? path: __dirname +"/public",//打包后的文件存放的地方filename:"bundle.js"http://打包后輸出文件的文件名},? ? devtool:'eval-source-map',? ? devServer: {? ? ? ? contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true//實(shí)時(shí)刷新},module: {? ? ? ? rules: [? ? ? ? ? ? {? ? ? ? ? ? ? ? test: /(\.jsx|\.js)$/,? ? ? ? ? ? ? ? use: {? ? ? ? ? ? ? ? ? ? loader:"babel-loader",? ? ? ? ? ? ? ? ? ? options: {? ? ? ? ? ? ? ? ? ? ? ? presets: ["env","react"]? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? exclude: /node_modules/? ? ? ? ? ? }? ? ? ? ]? ? }};

現(xiàn)在你的webpack的配置已經(jīng)允許你使用ES6以及JSX的語(yǔ)法了擎场。繼續(xù)用上面的例子進(jìn)行測(cè)試羽德，不過這次我們會(huì)使用React，記得先安裝 React 和 React-DOM

npm install --save react react-dom

接下來我們使用ES6的語(yǔ)法迅办，更新Greeter.js并返回一個(gè)React組件

//Greeter,jsimportReact, {Component}from'react'importconfigfrom'./config.json';classGreeterextendsComponent{? render() {return(

修改main.js如下宅静，使用ES6的模塊定義和渲染Greeter模塊

// main.jsimportReactfrom'react';import{render}from'react-dom';importGreeterfrom'./Greeter';render(, document.getElementById('root'));

重新使用npm start打包，如果之前打開的本地服務(wù)器沒有關(guān)閉站欺，你應(yīng)該可以在localhost:8080下看到與之前一樣的內(nèi)容姨夹，這說明react和es6被正常打包了纤垂。

localhost:8080

Babel的配置

Babel其實(shí)可以完全在webpack.config.js中進(jìn)行配置，但是考慮到babel具有非常多的配置選項(xiàng)磷账，在單一的webpack.config.js文件中進(jìn)行配置往往使得這個(gè)文件顯得太復(fù)雜峭沦，因此一些開發(fā)者支持把babel的配置選項(xiàng)放在一個(gè)單獨(dú)的名為 ".babelrc" 的配置文件中。我們現(xiàn)在的babel的配置并不算復(fù)雜逃糟，不過之后我們會(huì)再加一些東西吼鱼，因此現(xiàn)在我們就提取出相關(guān)部分，分兩個(gè)配置文件進(jìn)行配置（webpack會(huì)自動(dòng)調(diào)用.babelrc里的babel配置選項(xiàng)）绰咽，如下：

module.exports= {? ? entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {? ? ? ? path: __dirname +"/public",//打包后的文件存放的地方filename:"bundle.js"http://打包后輸出文件的文件名},? ? devtool:'eval-source-map',? ? devServer: {? ? ? ? contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true//實(shí)時(shí)刷新},module: {? ? ? ? rules: [? ? ? ? ? ? {? ? ? ? ? ? ? ? test: /(\.jsx|\.js)$/,? ? ? ? ? ? ? ? use: {? ? ? ? ? ? ? ? ? ? loader:"babel-loader"},? ? ? ? ? ? ? ? exclude: /node_modules/? ? ? ? ? ? }? ? ? ? ]? ? }};

//.babelrc{"presets": ["react","env"]}

到目前為止菇肃，我們已經(jīng)知道了，對(duì)于模塊剃诅，Webpack能提供非常強(qiáng)大的處理功能巷送，那那些是模塊呢。

一切皆模塊

Webpack有一個(gè)不可不說的優(yōu)點(diǎn)矛辕，它把所有的文件都都當(dāng)做模塊處理笑跛，JavaScript代碼，CSS和fonts以及圖片等等通過合適的loader都可以被處理聊品。

CSS

webpack提供兩個(gè)工具處理樣式表飞蹂，css-loader和style-loader，二者處理的任務(wù)不同翻屈，css-loader使你能夠使用類似@import和url(...)的方法實(shí)現(xiàn)require()的功能,style-loader將所有的計(jì)算后的樣式加入頁(yè)面中陈哑，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

繼續(xù)上面的例子

//安裝

npm install --save-dev style-loader css-loader

//使用module.exports = {? ...? ? module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? }};

請(qǐng)注意這里對(duì)同一個(gè)文件引入多個(gè)loader的方法伸眶。

接下來惊窖，在app文件夾里創(chuàng)建一個(gè)名字為"main.css"的文件，對(duì)一些元素設(shè)置樣式

/* main.css */html{box-sizing: border-box;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*, *:before, *:after{box-sizing: inherit;}body{margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;}h1,h2,h3,h4,h5,h6,p,ul{margin:0;padding:0;}

我們這里例子中用到的webpack只有單一的入口厘贼，其它的模塊需要通過import,require,url等與入口文件建立其關(guān)聯(lián)界酒，為了讓webpack能找到”main.css“文件，我們把它導(dǎo)入”main.js “中嘴秸，如下

//main.jsimportReactfrom'react';import{render}from'react-dom';importGreeterfrom'./Greeter';import'./main.css';//使用require導(dǎo)入css文件render(, document.getElementById('root'));

通常情況下毁欣，css會(huì)和js打包到同一個(gè)文件中，并不會(huì)打包為一個(gè)單獨(dú)的css文件岳掐，不過通過合適的配置webpack也可以把css打包為單獨(dú)的文件的凭疮。

上面的代碼說明webpack是怎么把css當(dāng)做模塊看待的，咱們繼續(xù)看一個(gè)更加真實(shí)的css模塊實(shí)踐串述。

CSS module

在過去的一些年里执解，JavaScript通過一些新的語(yǔ)言特性，更好的工具以及更好的實(shí)踐方法（比如說模塊化）發(fā)展得非常迅速纲酗。模塊使得開發(fā)者把復(fù)雜的代碼轉(zhuǎn)化為小的材鹦，干凈的逝淹，依賴聲明明確的單元，配合優(yōu)化工具桶唐，依賴管理和加載管理可以自動(dòng)完成。

不過前端的另外一部分茉兰，CSS發(fā)展就相對(duì)慢一些尤泽，大多的樣式表卻依舊巨大且充滿了全局類名，維護(hù)和修改都非常困難规脸。

被稱為CSS modules的技術(shù)意在把JS的模塊化思想帶入CSS中來坯约，通過CSS模塊，所有的類名莫鸭，動(dòng)畫名默認(rèn)都只作用于當(dāng)前模塊闹丐。Webpack對(duì)CSS模塊化提供了非常好的支持，只需要在CSS loader中進(jìn)行簡(jiǎn)單配置即可被因，然后就可以直接把CSS的類名傳遞到組件的代碼中卿拴，這樣做有效避免了全局污染。具體的代碼如下

module.exports = {? ? ...? ? module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true,// 指定啟用css moduleslocalIdentName:'[name]__[local]--[hash:base64:5]'// 指定css的類名格式}? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? }};

我們?cè)赼pp文件夾下創(chuàng)建一個(gè)Greeter.css文件來進(jìn)行一下測(cè)試

/* Greeter.css */.root{background-color:#eee;padding:10px;border:3pxsolid#ccc;}

導(dǎo)入.root到Greeter.js中

importReact, {Component}from'react';importconfigfrom'./config.json';importstylesfrom'./Greeter.css';//導(dǎo)入classGreeterextendsComponent{? render() {return(//使用cssModule添加類名的方法? ? ? ? {config.greetText});? }}exportdefaultGreeter

放心使用把梨与，相同的類名也不會(huì)造成不同組件之間的污染堕花。

應(yīng)用了css module后的樣式

CSS modules 也是一個(gè)很大的主題，有興趣的話可以去其官方文檔了解更多粥鞋。

CSS預(yù)處理器

Sass和Less之類的預(yù)處理器是對(duì)原生CSS的拓展缘挽，它們?cè)试S你使用類似于variables,nesting,mixins,inheritance等不存在于CSS中的特性來寫CSS，CSS預(yù)處理器可以這些特殊類型的語(yǔ)句轉(zhuǎn)化為瀏覽器可識(shí)別的CSS語(yǔ)句呻粹，

你現(xiàn)在可能都已經(jīng)熟悉了壕曼，在webpack里使用相關(guān)loaders進(jìn)行配置就可以使用了，以下是常用的CSS 處理loaders:

Less Loader

Sass Loader

Stylus Loader

不過其實(shí)也存在一個(gè)CSS的處理平臺(tái)-PostCSS等浊，它可以幫助你的CSS實(shí)現(xiàn)更多的功能腮郊，在其官方文檔可了解更多相關(guān)知識(shí)。

舉例來說如何使用PostCSS凿掂，我們使用PostCSS來為CSS代碼自動(dòng)添加適應(yīng)不同瀏覽器的CSS前綴伴榔。

首先安裝postcss-loader和autoprefixer（自動(dòng)添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

接下來，在webpack配置文件中添加postcss-loader庄萎，在根目錄新建postcss.config.js,并添加如下代碼之后踪少，重新使用npm start打包時(shí)，你寫的css會(huì)自動(dòng)根據(jù)Can i use里的數(shù)據(jù)添加不同前綴了糠涛。

//webpack.config.jsmodule.exports = {? ? ...? ? module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? }}

// postcss.config.jsmodule.exports= {? ? plugins: [? ? ? ? require('autoprefixer')? ? ]}

至此援奢，本文已經(jīng)談?wù)摿颂幚鞪S的Babel和處理CSS的PostCSS的基本用法，它們其實(shí)也是兩個(gè)單獨(dú)的平臺(tái)忍捡，配合webpack可以很好的發(fā)揮它們的作用集漾。接下來介紹Webpack中另一個(gè)非常重要的功能-Plugins

插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的切黔，它們會(huì)在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)的任務(wù)具篇。

Loaders和Plugins常常被弄混纬霞，但是他們其實(shí)是完全不同的東西，可以這么來說驱显，loaders是在打包構(gòu)建過程中用來處理源文件的（JSX诗芜，Scss，Less..）埃疫，一次處理一個(gè)伏恐，插件并不直接操作單個(gè)文件，它直接對(duì)整個(gè)構(gòu)建過程其作用栓霜。

Webpack有很多內(nèi)置插件翠桦，同時(shí)也有很多第三方插件，可以讓我們完成更加豐富的功能胳蛮。

使用插件的方法

要使用某個(gè)插件销凑，我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關(guān)鍵字部分添加該插件的一個(gè)實(shí)例（plugins是一個(gè)數(shù)組）繼續(xù)上面的例子鹰霍，我們添加了一個(gè)給打包后代碼添加版權(quán)聲明的插件闻鉴。

constwebpack =require('webpack');module.exports = {...? ? module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有，翻版必究')? ? ],};

通過這個(gè)插件茂洒，打包后的JS文件顯示如下

版權(quán)所有孟岛，翻版必究

這就是webpack插件的基礎(chǔ)用法了，下面給大家推薦幾個(gè)常用的插件

HtmlWebpackPlugin

這個(gè)插件的作用是依據(jù)一個(gè)簡(jiǎn)單的index.html模板督勺，生成一個(gè)自動(dòng)引用你打包后的JS文件的新index.html渠羞。這在每次生成的js文件名稱不同時(shí)非常有用（比如添加了hash值）。

安裝

npm install --save-dev html-webpack-plugin

這個(gè)插件自動(dòng)完成了我們之前手動(dòng)做的一些事情智哀，在正式使用之前需要對(duì)一直以來的項(xiàng)目結(jié)構(gòu)做一些更改：

移除public文件夾次询，利用此插件，index.html文件會(huì)自動(dòng)生成瓷叫，此外CSS已經(jīng)通過前面的操作打包到JS中了屯吊。

在app目錄下，創(chuàng)建一個(gè)index.tmpl.html文件模板摹菠，這個(gè)模板包含title等必須元素盒卸，在編譯過程中，插件會(huì)依據(jù)此模板生成最終的html頁(yè)面次氨，會(huì)自動(dòng)添加所依賴的 css, js蔽介，favicon等文件，index.tmpl.html中的模板源代碼如下：

Webpack Sample Project

3.更新webpack的配置文件，方法同上,新建一個(gè)build文件夾用來存放最終的輸出文件

constwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');module.exports = {entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/build",filename:"bundle.js"},devtool:'eval-source-map',devServer: {contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true//實(shí)時(shí)刷新},module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有虹蓄，翻版必究'),newHtmlWebpackPlugin({template: __dirname +"/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例犀呼，并傳入相關(guān)的參數(shù)})? ? ],};

再次執(zhí)行npm start你會(huì)發(fā)現(xiàn)，build文件夾下面生成了bundle.js和index.html薇组。

build文件夾

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里很有用的一個(gè)插件外臂，它允許你在修改組件代碼后，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的效果体箕。

在webpack中實(shí)現(xiàn)HMR也很簡(jiǎn)單专钉，只需要做兩項(xiàng)配置

在webpack配置文件中添加HMR插件；

在Webpack Dev Server中添加“hot”參數(shù)累铅；

不過配置完這些后，JS模塊其實(shí)還是不能自動(dòng)熱加載的站叼，還需要在你的JS模塊中執(zhí)行一個(gè)Webpack提供的API才能實(shí)現(xiàn)熱加載娃兽，雖然這個(gè)API不難使用，但是如果是React模塊尽楔，使用我們已經(jīng)熟悉的Babel可以更方便的實(shí)現(xiàn)功能熱加載投储。

整理下我們的思路，具體實(shí)現(xiàn)方法如下

Babel和webpack是獨(dú)立的工具

二者可以一起工作

二者都可以通過插件拓展功能

HMR是一個(gè)webpack插件阔馋，它讓你能瀏覽器中實(shí)時(shí)觀察模塊修改后的效果玛荞，但是如果你想讓它工作，需要對(duì)模塊進(jìn)行額外的配額呕寝；

Babel有一個(gè)叫做react-transform-hrm的插件勋眯，可以在不對(duì)React模塊進(jìn)行額外的配置的前提下讓HMR正常工作；

還是繼續(xù)上例來實(shí)際看看如何配置

constwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');module.exports = {entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/build",filename:"bundle.js"},devtool:'eval-source-map',devServer: {contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true,hot:true},module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有下梢，翻版必究'),newHtmlWebpackPlugin({template: __dirname +"/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例客蹋，并傳入相關(guān)的參數(shù)}),newwebpack.HotModuleReplacementPlugin()//熱加載插件],};

安裝react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

// .babelrc{"presets": ["react","env"],"env": {"development": {"plugins": [["react-transform", {"transforms": [{"transform":"react-transform-hmr","imports": ["react"],"locals": ["module"]? ? ? }]? ? }]]? ? }? }}

現(xiàn)在當(dāng)你使用React時(shí)，可以熱加載模塊了,每次保存就能在瀏覽器上看到更新內(nèi)容孽江。

產(chǎn)品階段的構(gòu)建

目前為止讶坯，我們已經(jīng)使用webpack構(gòu)建了一個(gè)完整的開發(fā)環(huán)境。但是在產(chǎn)品階段岗屏，可能還需要對(duì)打包的文件進(jìn)行額外的處理辆琅，比如說優(yōu)化，壓縮这刷，緩存以及分離CSS和JS婉烟。

對(duì)于復(fù)雜的項(xiàng)目來說，需要復(fù)雜的配置崭歧，這時(shí)候分解配置文件為多個(gè)小的文件可以使得事情井井有條隅很，以上面的例子來說，我們創(chuàng)建一個(gè)webpack.production.config.js的文件，在里面加上基本的配置,它和原始的webpack.config.js很像叔营，如下

// webpack.production.config.jsconstwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');module.exports = {entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/build",filename:"bundle.js"},devtool:'null',//注意修改了這里屋彪，這能大大壓縮我們的打包代碼devServer: {contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true,hot:true},module: {rules: [{test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/}, {test:/\.css$/,use: ExtractTextPlugin.extract({fallback:"style-loader",use: [{loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}],? ? ? ? ? ? })? ? ? ? }]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有，翻版必究'),newHtmlWebpackPlugin({template: __dirname +"/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例绒尊，并傳入相關(guān)的參數(shù)}),newwebpack.HotModuleReplacementPlugin()//熱加載插件],};

//package.json{"name":"test","version":"1.0.0","description":"","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1","start":"webpack","server":"webpack-dev-server --open","build":"NODE_ENV=production webpack --config ./webpack.production.config.js --progress"},"author":"","license":"ISC","devDependencies": {...? },"dependencies": {"react":"^15.6.1","react-dom":"^15.6.1"}}

注意:如果是window電腦畜挥，build需要配置為"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress".謝謝評(píng)論區(qū)簡(jiǎn)友提醒。

優(yōu)化插件

webpack提供了一些在發(fā)布階段非常有用的優(yōu)化插件婴谱，它們大多來自于webpack社區(qū)蟹但，可以通過npm安裝，通過以下插件可以完成產(chǎn)品發(fā)布階段所需的功能

OccurenceOrderPlugin:為組件分配ID谭羔，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊华糖，并為它們分配最小的ID

UglifyJsPlugin：壓縮JS代碼；

ExtractTextPlugin：分離CSS和JS文件

我們繼續(xù)用例子來看看如何添加它們瘟裸，OccurenceOrder 和 UglifyJS plugins 都是內(nèi)置插件客叉，你需要做的只是安裝其它非內(nèi)置插件

npm install --save-dev extract-text-webpack-plugin

在配置文件的plugins后引用它們

// webpack.production.config.jsconstwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');constExtractTextPlugin =require('extract-text-webpack-plugin');module.exports = {entry: __dirname +"/app/main.js",//已多次提及的唯一入口文件output: {path: __dirname +"/build",filename:"bundle.js"},devtool:'none',devServer: {contentBase:"./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄historyApiFallback:true,//不跳轉(zhuǎn)inline:true,hot:true},module: {rules: [? ? ? ? ? ? {test:/(\.jsx|\.js)$/,use: {loader:"babel-loader"},exclude:/node_modules/},? ? ? ? ? ? {test:/\.css$/,use: [? ? ? ? ? ? ? ? ? ? {loader:"style-loader"}, {loader:"css-loader",options: {modules:true}? ? ? ? ? ? ? ? ? ? }, {loader:"postcss-loader"}? ? ? ? ? ? ? ? ]? ? ? ? ? ? }? ? ? ? ]? ? },plugins: [newwebpack.BannerPlugin('版權(quán)所有，翻版必究'),newHtmlWebpackPlugin({template: __dirname +"/app/index.tmpl.html"}),newwebpack.optimize.OccurrenceOrderPlugin(),newwebpack.optimize.UglifyJsPlugin(),newExtractTextPlugin("style.css")? ? ],};

此時(shí)執(zhí)行npm run build可以看見代碼是被壓縮后的

壓縮后的代碼

緩存

緩存無處不在话告，使用緩存的最好方法是保證你的文件名和文件內(nèi)容是匹配的（內(nèi)容改變兼搏，名稱相應(yīng)改變）

webpack可以把一個(gè)哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合體（[name], [id] and [hash]）到輸出文件名前

constwebpack =require('webpack');constHtmlWebpackPlugin =require('html-webpack-plugin');constExtractTextPlugin =require('extract-text-webpack-plugin');module.exports = {..? ? output: {path: __dirname +"/build",filename:"bundle-[hash].js"},? ...};

現(xiàn)在用戶會(huì)有合理的緩存了沙郭。

帶hash值的js名

去除build文件中的殘余文件

添加了hash之后佛呻，會(huì)導(dǎo)致改變文件內(nèi)容后重新打包時(shí)，文件名不同而內(nèi)容越來越多病线，因此這里介紹另外一個(gè)很好用的插件clean-webpack-plugin吓著。

安裝：

cnpm install clean-webpack-plugin --save-dev

使用：

引入clean-webpack-plugin插件后在配置文件的plugins中做相應(yīng)配置即可：

constCleanWebpackPlugin =require("clean-webpack-plugin");? plugins: [? ? ...// 這里是之前配置的其它各種插件newCleanWebpackPlugin('build/*.*', {root: __dirname,verbose:true,dry:false})? ]

關(guān)于clean-webpack-plugin的詳細(xì)使用可參考這里

總結(jié)

其實(shí)這是一年前的文章了，趁周末重新運(yùn)行和修改了一下氧苍，現(xiàn)在所有的代碼都可以正常運(yùn)行夜矗，所用webpack基于最新的webpack3.5.3。希望依舊能對(duì)你有幫助让虐。

這是一篇好長(zhǎng)的文章紊撕，謝謝你的耐心，能仔細(xì)看到了這里赡突，大概半個(gè)月前我第一次自己一步步配置項(xiàng)目所需的Webpack后就一直想寫一篇筆記做總結(jié)对扶，幾次動(dòng)筆都不能讓自己滿意，總覺得寫不清楚惭缰。其實(shí)關(guān)于Webpack本文講述得仍不完全浪南，不過相信你看完后已經(jīng)進(jìn)入Webpack的大門，能夠更好的探索其它的關(guān)于Webpack的知識(shí)了漱受。

歡迎大家在文后發(fā)表自己的觀點(diǎn)討論络凿。

更新說明

2017-12-11更新，修改css module部分代碼及示例圖片，css module真的非常好用絮记，希望大家都能用上摔踱。

2017年9月18日更新，添加了一個(gè)使用webpack配置多頁(yè)應(yīng)用的demo,可以點(diǎn)擊此處查看

2017年8月13日更新怨愤，本文依據(jù)webpack3.5.3將文章涉及代碼完全重寫派敷，所有代碼都在Mac上正常運(yùn)行過。希望依舊對(duì)你學(xué)習(xí)webpack有幫助撰洗。

2017年8月16號(hào)更新：

最近在Gitchat上將發(fā)起了一場(chǎng)關(guān)于webpack的分享篮愉，目的在于一起花最短的時(shí)間理解和學(xué)會(huì)webpack，感興趣的童鞋可以微信掃描注冊(cè)哈差导。

作者：zhangwang

鏈接：http://www.reibang.com/p/42e11515c10f

來源：簡(jiǎn)書

簡(jiǎn)書著作權(quán)歸作者所有试躏，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。