Webpack3.X版學習全文

時間 2019-11-19

原文原文鏈接

若是你webpack用的是4.x版本，此文章部分知識有所改動，因此學習時儘可能使用3.x的版本。javascript

本文講解的是Webpack3.0+的知識，努力作到全網最好的webpack3.0教程。文章經過一個半月的時間創做完成，共二十四小節，將近四萬字，並根據文字教程錄製了對應的視頻教程（48元24節，350分鐘視頻講解，保證你能夠學會），固然你不須要看視頻教程也能很快的學會webpack最新版的知識。css

若是你已經購買了視頻教程，能夠在視頻的最後一節看到如何加入討論微信羣，技術胖會每週上線解答你學習中的困難。html

#第01節：認識WebPack的做用

若是您已經在前端行業中，WebPack在業界的流行程度天然必備多說，成爲了前端小白升級爲前端工程師的必備技能。若是你對webpack還不夠熟悉，那你在前端前進的腳步會受到阻礙，可是你幸運的搜索到了這篇文章。（可是文章可能不會講解如何從1.0、2.0版本升級3.0版本的知識，而是直接講解3.0的知識，因此你可能須要有一個空杯心態來學習）前端

在學習過程當中，我但願你能每節看完文章後，均可以本身親手作一作，若是你不做就不會出現錯誤，不出現錯誤，你就沒辦法增加經驗，那你就什麼都學不會。相信我，慢慢來，比較快。vue

** 前端爲何須要WebPack？**java

如今的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行後，JavaScript的複雜度增長和須要一大堆依賴包，還須要解決SCSS，Less……新增樣式的擴展寫法的編譯工做。因此現代化的前端已經徹底依賴於WebPack的輔助了。node

如今最流行的三個前端框架，能夠說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。react

React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack

今後能夠看出，不管你前端走那條線，你都要有很強的Webpack知識，才能祝你成爲這個框架領域的大牛。jquery

** 什麼是WebPack？**webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了優化項目的責任。

這段話有三個重點：

打包：能夠把多個Javascript文件打包成一個文件，減小服務器壓力和下載帶寬。
轉換：把拓展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。
優化：前端變的愈來愈複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化和提高性能的責任。

咱們能夠從下圖再次瞭解一下WebPack的做用:

安裝WebPack

看了這麼久，必定着急動手做一做了。要使用WebPack就要先進行安裝，就和你要使用微信，必須在手機上下載微信的APP同樣，可是不一樣的是WebPack的安裝，採用的是命令行npm形式的安裝。

這裏我以windows系統爲例，給你們作截圖示範。蘋果安裝稍有不一樣，不過大同小異（若是有問題，能夠直接進羣交流，進羣方法看文章開頭）。

具體安裝方法：

用win+R打開運行對話框，輸入cmd進入命令行模式。而後找到你想開始項目的地方，輸入下方代碼：

mkdir webpack_demo
cd webpack_demo

第一句是創建一個文件夾，第二句是進入這個文件夾。這個文件夾就是咱們的項目文件目錄了，文件夾創建好後，能夠經過下面命令安裝WebPack。

須要注意的是,你在執行下一步時必須安裝node，能夠經過 node -v來查看node安裝狀況和版本，若是沒有安裝，要先安裝node才能夠繼續進行。

//全局安裝
npm install -g webpack

若是你這時安裝失敗了（出現了報錯信息），通常有三種可能：

檢查你node的版本號，若是版本號太低，升級爲最新版本。
網絡問題，能夠考慮使用cnpm來安裝（這個是淘寶實時更新的鏡像）,具體能夠登陸cnpm的官方網站學習http://npm.taobao.org/。
權限問題，在Liux、Mac安裝是須要權限，若是你是Windows系統，主要要使用以管理員方式安裝。

**注意：**全局安裝是能夠的，可是webpack官方是不推薦的。這會將您項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。

對項目目錄進行安裝

全局安裝完成後，咱們還要進行一個項目目錄的安裝。在用npm安裝前，咱們先要進行一下初始化，初始化的主要目的是生成package.json文件（這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等，若是你對此文件還不瞭解，能夠看看node 的相關知識）。

在命令行輸入：

npm n init

輸入完成後，npm終端會問你關於項目的名稱，描述……一堆內容，若是你不考慮發佈到npm上，這些內容都不重要，並且咱們後期還能夠用文本的形式修改這些內容。如今咱們只要一路回車就完成了初始化。這時用dir命令已經能夠看到生成的package.json文件了。

輸入下面命令進行項目目錄的安裝：

npm install --save-dev webpack

這裏的參數–save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。

開發環境and生產環境：

開發環境：在開發時須要的環境，這裏指在開發時須要依賴的包。
生產環境：程序開發完成，開始運行後的環境，這裏指要使項目運行，所須要的依賴包。

查看webpack版本

你安裝好後，會想知道你如今webpack版本，在工做中交流時，也會常常問到你，你的打包版本是什麼？這時候咱們能夠用下面的命令進行查看。

webpackw  -v

能夠看到我如今的版本的3.6.0版本，這是目前（2017/9/16）最新的版本了。出現了版本號，也說明你的webpack安裝成功了。

看到這裏，咱們第一節的內容就完成了，我建議你停一下，把webpack安裝到你的電腦上，再進行向下觀看，若是在安裝時遇到什麼問題，能夠在下方的留言區給我留言。

#第02節：讓你快速上手一個Demo

上節課已經安裝好了Webpack到電腦上，這節課就開始一個簡單的Demo，讓你快速上手和熟悉Webpack的基本用法，學習並做完這節課內容你就能夠和朋友小吹一下說：我也會Webpack。

創建基本項目結構

首先進入上節課咱們創建的webpack_demo目錄（每一個人創建的位置不一樣，可能創建在了D盤或者E盤）。進入後在根目錄創建兩個文件夾，分別是src文件夾和dist文件夾：

src文件夾：用來存放咱們編寫的javascript代碼，能夠簡單的理解爲用JavaScript編寫的模塊。
dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。

你能夠理解成src是源碼文件，dist是咱們編譯打包好的文件；一個用於開發環境，一個用於生產環境。

編寫程序文件：

文件夾創建好後，咱們在dist文件下手動創建一個index.html文件，並寫入下面的代碼。

/dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jspang webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

這裏引入了一個JavaScript的bundle.js文件。這個文件如今尚未，這是用webpack執行打包命令後生產的文件。咱們的index.html寫好後，接下來在src文件夾下創建entery.js的文件，用於編寫咱們的JavaScript代碼，也是咱們的入口文件。

src/entery.js

document.getElementById('title').innerHTML='Hello Webpack';

這個文件的代碼很簡單，就是在

標籤裏寫入Hello Webpack這句話。

第一次Webpack打包

Webpack實際上是能夠在終端（命令行）中使用的，基本使用方法以下：

webpack {entry file} {destination for bundled file}

{entery file}:入口文件的路徑，本文中就是src/entery.js的路徑；
{destination for bundled file}:填寫打包後存放的路徑。
注意：在命令行中是不須要寫{ }的。

執行的結果以下圖：

命令執行成功後，會在dist目錄下出現bundle.js文件，這時咱們就能夠在瀏覽器中預覽結果了，網頁中顯示出了Hello Webpack的信息。

總結：

從這個Demo中你會了解到webpack的基本用法和使用過程，並會了命令行打包的方法。在這節文章的最後，我仍是要強調，你必定要把本節內容在本身的電腦上敲一遍，這樣你才能深刻了解。

#第03節：配置文件：入口和出口

首先要說明的是：學習這節課前，務必做完上節課的代碼，不然你會學的一臉懵逼。

上節課經過一個小Demo咱們對Webpack有了初步瞭解，可是上節課的終端打包方案，在實際開發中並不使用，而是使用Webpack的配置文件的方式進行設置。這節課咱們就學一下配置文件的大致結構和入口出口文件的配置。

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，這個文件須要本身在項目根目錄下手動創建。創建好後咱們對其進行配置，先看下面的代碼（webpack.config.js的基本結構），這是一個沒有內容的標準webpack配置模版。

webpack.config.js

module.exports={
    //入口文件的配置項
    entry:{},
    //出口文件的配置項
    output:{},
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

entry：配置入口文件的地址，能夠是單一入口，也能夠是多入口。
output：配置出口文件的地址，在webpack2.X版本後，支持多出口配置。
module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。
plugins：配置插件，根據你的須要配置不一樣功能的插件。
devServer：配置開發服務功能，後期咱們會詳細講解。

entry選項（入口配置）

這個選項就是配置咱們要壓縮的文件通常是JavaScript文件（固然也能夠是CSS…..）。按照上節課的代碼(若是你上節課的代碼還沒做，那你能夠返回去從新做一下)，這裏要填寫的是src目錄下的entery.js文件。

wepback.config.js中的entry選項

//入口文件的配置項
entry:{
    //裏面的entery是能夠隨便寫的
    entry:'./src/entry.js'
},

output選項（出口配置）

出口配置是用來告訴webpack最後打包文件的地址和文件名稱的。按照上節課的操做，應該打包到dist目錄下。在編寫出口文件時，咱們須要用到一點Node的知識，若是你還不會Node也沒有關係，就簡單的兩句代碼，你記住就能夠了（在視頻中我還有詳細的講解）。

//出口文件的配置項
output:{
    //打包的路徑文職
    path:path.resolve(__dirname,'dist'),
    //打包的文件名稱
    filename:'bundle.js'
    
},

若是你只這樣寫，是會報錯的：找不到path這個東西。因此咱們要在webpack.config.js的頭部引入path，代碼以下：

const  path  =  `require`('path');

這裏咱們使用了const，這是ES6的語法，若是你對ES6還不熟悉，也能夠看技術胖ES6的課程哦（http://old.jspag.com/2017/06/03/es6/）。

其實path.resolve(__dirname,’dist’)就是獲取了項目的絕對路徑。若是你仍是不理解，我會在視頻中給你進行演示。

filename:是打包後的文件名稱，這裏咱們起名爲bundle.js。

如今webpack.config.js的代碼：

const path = `require`('path');
module.exports={
    //入口文件的配置項
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'bundle.js'
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

這個代碼寫完後，能夠在終端中直接輸入webpack就會進行打包。

在實際開發中咱們都是經過配置文件進行打包的，因此必需要掌握好。

多入口、多出口配置

Webpack在版本1的時候很難設置多出口文件，可是在2版本開始就變的很方便了。直接看多入口和多出口的文件配置，而後能夠和單一出口對比一下，你會發現這種設置很是簡單（只需改動兩點配置就能夠）。

const path = `require`('path');
module.exports={
    //入口文件的配置項
    entry:{
        entry:'./src/entry.js',
        //這裏咱們又引入了一個入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'[name].js'
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

能夠看到代碼的第7和14行進行了增長和修改，在入口文件配置中，增長了一個entry2.js的入口文件（這個文件你須要本身手動創建），這時候要打包的就有了兩個入口文件。在代碼14行咱們把原來的bundle.js修改爲了[name].js。

[name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。

總結：

這節課的內容是須要仔細消化的，不求你記住，可是要練習，由於你不管配置任何項目的Webpack都要做這些操做。你能夠把本文看成一個字典，在須要的時候進行查詢。

#第04節：配置文件：服務和熱更新

做爲一個前端工程師，最大的編程需求之一就是所見即所得的工具，也就是常說的熱更新。如今通常有點規模的公司都爲前端工程師準備了雙屏顯示器，其目的就是一個屏幕編寫代碼，一個屏幕實時顯示頁面效果。這節課就學習用webpack3.6版本實現熱更新效果。

從這節課開始視頻須要購買才能夠觀看。教程一共30集左右，學完後徹底能夠達到獨立構建中大型項目水平，今後webpack不在是你職業發展的瓶頸了。

購買地址：https://www.edurt.com/my/course/167

設置webpack-dev-server

要執行webpack-dev-server是要先用npm install webpack-dev-server –save-dev來進行下載的。下載好後，須要配置一下devServer。最簡單的devServer配置項只有四個。先看一下代碼，而後我再做解釋。

/webpack.config.js

devServer:{
        //設置基本目錄結構
        contentBase:path.resolve(__dirname,'dist'),
        //服務器的IP地址，可使用IP也可使用localhost
        host:'localhost',
        //服務端壓縮是否開啓
        compress:true,
        //配置服務端口號
        port:1717
    }

contentBase:配置服務器基本運行路徑，用於找到程序打包地址。
host：服務運行地址，建議使用本機IP，這裏爲了講解方便，因此用localhost。
compress：服務器端壓縮選型，通常設置爲開啓，若是你對服務器壓縮感興趣，能夠自行學習。
port：服務運行端口，建議不使用80，很容易被佔用，這裏使用了1717.

**注意：**這裏須要使用npm 來進行安裝webpack-dev-server了，命令以下：

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

這是本地安裝，因此使用了–save-dev。

配置好後，你能夠試着在終端中輸入webpack-dev-server,若是能夠執行成功，可是每每提示下面的錯誤（或者是沒法找到內部或外部命令）。

出現下面的錯誤不用慌張，咱們只要在package.json裏配置一下scripts選項就能夠執行了。

/package.json

"scripts": {
    "server":"webpack-dev-server"
 },

配置好保存後，在終端裏輸入 npm run server 打開服務器。而後在瀏覽器地址欄輸入http://localhost:1717就能夠看到結果了。

支持熱更新

在npm run server 啓動後，它是有一種監控機制的（也叫watch）。它能夠監控到咱們修改源碼，並當即在瀏覽器裏給咱們更新。

注意：這裏只是咱們的webpack3.6版本支持，在3.5版本時要支持熱更新還須要一些其餘的操做。由於已經有了成熟的3.6版本，我就再也不介紹低版本的操做方法。還有一種狀況。若是你都設置好了，可是不進行熱更新，多是你係統的問題，在Linux和Ma上支持良好，在Windows上有時會出現問題。

若是你在操做時，在Windows上出現問題了，請在文章下方給我留言。

#第05節：模塊：CSS文件打包

Webpack在生產環境中有一個重要的做用就是減小http的請求數，就是把多個文件打包到一個js裏，這樣請求數就能夠減小好多。這節課咱們就學習一個重要的知識，把咱們的CSS文件打包。在學習CSS打包以前，須要先對webpack.config.js裏的Loaders配置項進行

購買地址：https://www.edurt.com/my/course/167

Loaders

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的緣由。經過使用不一樣的Loader，Webpack能夠的腳本和工具，從而對不一樣的文件格式進行特定處理。

簡單的舉幾個Loaders使用例子：

能夠把SASS文件的寫法轉換成CSS，而不在使用其餘轉換工具。
能夠把ES6或者ES7的代碼，轉換成大多瀏覽器兼容的JS代碼。
能夠把React中的JSX轉換成JavaScript代碼。

注意：全部的Loaders都須要在npm中單獨進行安裝，並在webpack.config.js裏進行配置。下面咱們對Loaders的配置型簡單梳理一下。

test：用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，不然報錯；
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
query：爲loaders提供額外的設置選項（可選）。

明白了Loader是什麼後，就開始這節課的正題，如何打包CSS文件。

打包CSS文件：

創建index.css文件

要打包CSS你必須先要有個CSS文件，在/src目錄下，咱們創建一個css文件夾，在文件夾裏創建index.css文件。代碼內容以下。

./src/css/index.css

body{
    background-color: red;
    color: white;
}

CSS文件創建好後，須要引入到入口文件中，才能夠打包到，這裏咱們引入到entry.js中。

/src/entery.js中在首行加入代碼：

import i css from './css/index.css';

CSS和引入作好後，咱們就須要使用loader來解析CSS文件了，這裏咱們須要兩個解析用的loader，分別是style-loader和css-loader。

style-loader:

它是用來處理css文件中的url()等，npm中的網址：https://www.npmjs.com/package/style-loader

用npm install 進行項目安裝：

npm install style-loader --save-dev

css-loader：

它是用來將css插入到頁面的style標籤。npm中的網址：https://www.npmjs.com/package/css-loader

用npm install 進行項目安裝：

npm n install --save-dev css-loader

兩個loader都下載安裝好後，咱們就能夠配置咱們loaders了。

loaders配置：

修改webpack.config.js中module屬性中的配置代碼以下：

webpack.config.js

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

這個文件的詳細講解，咱們在上面已經說起，若是你仍是沒法理解能夠觀看視頻。

總結：

敲黑板，這節課的內容很是重要，上面的配置過程最好做兩遍以上，徹底瞭解後，再進行下節課的學習。loader的使用也決定着你webpack水平的高低。因此必定要重視和練習。

#第06節：插件配置：配置JS壓縮

經過五節課的學習，我相信小夥伴已經對Webpack有所入門。這節課讓咱們初步瞭解插件（plugins[ ]）的用法。在學習新知識以前，我先回答一個小夥伴提的問題，他的問題就是：「我看到別人寫的CSS打包配置文件和你寫的不同，是否是有其餘的寫法？」

視頻教程購買地址：https://www.edurt.com/my/course/167

loader的三種寫法：

上節課學習瞭如何把CSS文件進行打包到JS當中去，有小夥伴就提問，我看到別人的CSS打包的寫法和你的寫法不太同樣，是否是他們寫錯了，loader還有幾種寫法，這裏咱們就看兩種另外的寫法。

第一種寫法：直接用use。

module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },

第二種寫法：把use換成loader。

module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },

**第三種寫法：用use+loader的寫法： **

module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },

由此看出，webpack的擴展和靈活性是很是強的，你習慣於那種寫法均可以。最重要的是，你看見別人項目的其餘寫法也不要慌張，本身去試一試，有可能就能夠Get到新知識。

壓縮JS代碼：

如今你寫的JS代碼，在上線以前，都是須要進行壓縮的，在沒有webpack和gulp這些工具前，你可能須要找一個壓縮軟件或者在線進行壓縮，在Webpack中能夠很輕鬆的實現JS代碼的壓縮，它是經過插件的方式實現的，這裏咱們就先來引入一個uglifyjs-webpack-plugin(JS壓縮插件，簡稱uglify)。

**注意：**雖然uglifyjs是插件，可是webpack版本里默認已經集成，不須要再次安裝。

引入：

咱們須要在webpack.config.js中引入uglifyjs-webpack-glugin插件

const uglify = `require`('uglifyjs-webpack-plugin');

引入後在plugins配置裏new一個 uglify對象就能夠了，代碼以下。

plugins:[
        new uglify()
    ],

這時候在終端中使用webpack進行打包，你會發現JS代碼已經被壓縮了。若是你用的VSCode的話，能夠按Alt+Z讓他文件自動換行，查看效果。

貼出經過6節課學習，如今webpack.config.js文件中的全部代碼，這樣你們能夠對照學習。

const path=`require`('path');
const uglify = `require`('uglifyjs-webpack-plugin');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins:[
        new uglify()
    ],
    devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'192.168.0.104',
       compress:true,
       port:1717
    }
}

#第07節：插件配置：HTML文件的發佈

有經驗的小夥伴其實一眼就能夠看出，如今咱們的項目結構是有問題的，咱們把index.html直接放到了dist文件夾下，這確定是不正確的，應該放到咱們src目錄下。可是前期咱們爲了按部就班的學習，因此把index.html放到了dist目錄下。這節課咱們就學習如何把html文件打包到咱們的生產路徑下。

視頻教程購買地址：https://www.edurt.com/my/course/167

devServer和JS壓縮的衝突

上節課學習了JS壓縮，在視頻中我使用了webpack進行打包，而沒有使用npm run server 進行預覽，也就是說沒有啓用devServer裏的配置。那有些小夥伴在學習完視頻後，在終端中輸入了npm run server進行了預覽，發現終端中報錯了。

要弄明白這個問題，咱們先要弄清楚什麼是開發環境，什麼是生產環境。開發環境中是基本不會對js進行壓縮的，在開發預覽時咱們須要明確的報錯行數和錯誤信息，因此徹底沒有必要壓縮JavasScript代碼。而生產環境中才會壓縮JS代碼，用於加快程序的工做效率。devServer用於開發環境，而壓縮JS用於生產環境，在開發環境中做生產環境的事情因此Webpack設置了衝突報錯。

在實際開發中，webpack配置文件是分開的，開發環境一個文件，生產環境一個文件。因此在講課以前我並無發現這個問題，感謝小夥伴提出的問題。若是你在學習過程當中有任何疑問，歡迎在文章下方留言。

打包HTML文件

咱們先把dist中的html文件剪切到src目錄中，並去掉咱們的JS引入代碼（webpack會自動爲咱們引入JS），由於這纔是咱們真實工做的目錄文件結構。

而後咱們配置webpack.config.js文件，先引入咱們的html-webpack-plugin插件。

const htmlPlugin= `require`('html-webpack-plugin');

引入後使用npm進行安裝包。

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

最後在webpack.config.js裏的plugins裏進行插件配置，配置代碼以下。

new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
           
        })

minify：是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。
hash：爲了開發中js有緩存效果，因此加入hash，這樣能夠有效避免緩存JS。
template：是要打包的html模版路徑和文件名稱。

上邊的都配置完成後，咱們就能夠在終端中使用webpack，進行打包。你會看到index.html文件已經被打包到咱們的dist目錄下了，而且自動爲咱們引入了路口的JS文件。

總結：

html文件的打包能夠有效的區分開發目錄和生產目錄，在webpack的配置中也要搞清楚哪些配置用於生產環境，哪些配置用於開發環境，避免兩種環境的配置衝突。

#第08節：圖片邁坑：CSS中的圖片處理

在學習Webapck過程當中你可能遇到的第一個坑就是CSS中的圖片處理。不少webpack新手都在圖片的坑中沒法自拔（有的小夥伴在開發環境中是能夠找到圖片的，可是一打包後就找不到圖片了，有的小夥伴是不知道如何正確引入html或者css中的圖片，致使程序出錯），咱們將用三節課時間搞完全走出webpack圖片的坑。

視頻教程購買地址：https://www.edurt.com/my/course/167

圖片寫入CSS

你能夠先在網上找一個圖片，我這裏就自戀的使用了個人頭像，若是你須要下載，也能夠下載（固然你能夠徹底本身找一個本身喜歡的）。

找到圖片後在src目錄下新建一個images文件夾，把圖片放入images文件夾。

在index.html文件中增長一個放置div的標籤（須要注意的是這裏修改的是src下的index.html文件，不是dist下的，這點新手很容易弄混，要格外注意），代碼以下。

<div id="tupian"></div>

編寫css文件，把你用的圖片做爲背景顯示。

#tupian{
   background-image: url(../images/manhua.png);
   width:466px;
   height:453px;
}

編寫完成後，咱們能夠試着用webpack去打包一下。你會發現終端中是報錯的，具體錯誤能夠看下圖。

file-loader、url-loader

上面的錯誤是因爲缺乏loader的解析，對loader其實咱們並不陌生，由於前邊已經學習了CSS打包的loader。咱們先安裝兩個解析圖片用的loader。

安裝file-loader和url-loader

npm install --save-dev file-loader url-loader

安裝好後咱們須要對兩個loader進行基本的瞭解，學習儘可能作到知其然知其因此然。

**file-loader：**解決引用路徑的問題，拿background樣式用url引入背景圖來講，咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑的。這就會致使圖片引入失敗。這個問題是用file-loader解決的，file-loader能夠解析項目中的url引入（不只限於css），根據咱們的配置，將圖片拷貝到相應的路徑，再根據咱們的配置，修改打包後文件引用路徑，使之指向正確的文件。

**url-loader：**若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy。

配置url-loader

咱們安裝好後，就可使用這個loader了，記得在loader使用時不須要用require引入，在plugins才須要使用require引入。

webpack.config.js文件

//模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

test:/.(png|jpg|gif)/是匹配圖片文件後綴名稱。
use：是指定使用的loader和loader的配置參數。
limit：是把小於500000B的文件打成Base64的格式，寫入JS。

寫好後就可使用webpack進行打包了，這回你會發現打包很順利的完成了。具體的Base64的格式，你能夠查看視頻中的樣子。

爲何只使用了url-loader

有的小夥伴會發現咱們並無在webpack.config.js中使用file-loader，可是依然打包成功了。咱們須要瞭解file-loader和url-loader的關係。url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：

1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL（Base64格式）；

2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。

也就是說，其實咱們只安裝一個url-loader就能夠了。可是爲了之後的操做方便，咱們這裏就順便安裝上file-loader。

#第09節：圖片邁坑：CSS分離與圖片路徑處理

經過上節課的學習已經能把小圖片打包成Base64格式，也對webpack對圖片的打包有個基本瞭解。這節課主要學習兩個知識：第一個是把CSS從JavasScript代碼中分離出來，第二個是如何處理分離出來後CSS中的圖片路徑不對問題。

視頻教程購買地址：https://www.edurt.com/my/course/167

CSS分離:extract-text-webpack-plugin

有些簡單的交互頁面中，你的JavasScript頁面代碼會很是少，而大部分代碼都在CSS中，這時候項目組長會要求把CSS單獨提取出來，方便之後更改。遇到這個需求你不要驚慌，已經有大神爲咱們準備好了對象的插件（plugin）。

extract-text-webpack-plugin

這個插件就能夠完美的解決咱們提取CSS的需求，可是webpack官方其實並不建議這樣做，他們認爲CSS就應該打包到JavasScript當中以減小http的請求數。但現實中的需求每每不是咱們前端能控制的，有些需求是咱們不能控制的，分離CSS就是這樣一個既合理由不合理的需求。

**安裝：**錄製課程時的版本是3.0.0版本，直接使用npm install 就能夠安裝。

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

**引入：**安裝完成後，須要先用require引入。

const extractTextPlugin = `require`("extract-text-webpack-plugin");

**設置Plugins：**引入成功後須要在plugins屬性中進行配置。這裏只要new一下這個對象就能夠了。

new extractTextPlugin("/css/index.css")

這裏的/css/index.css是分離後的路徑位置。這部配置完成後，包裝代碼：還要修改原來咱們的style-loader和css-loader。

修改代碼以下。

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

做完上邊這四部後，就可使用webpack進行打包了。

圖片路徑問題：

利用extract-text-webpack-plugin插件很輕鬆的就把CSS文件分離了出來，可是CSS路徑並不正確，不少小夥伴就在這裏搞個幾天仍是沒有頭緒，網上也給出了不少的解決方案，我覺的最好的解決方案是使用publicPath解決，我也一直在用。

publicPath：是在webpack.config.js文件的output選項中，主要做用就是處理靜態文件路徑的。

在處理前，咱們在webpack.config.js 上方聲明一個對象，叫website。

var website ={
    publicPath:"http://192.168.1.108:1717/"
}

注意，這裏的IP和端口，是你本機的ip或者是你devServer配置的IP和端口。

而後在output選項中引用這個對象的publicPath屬性。

//出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'[name].js',
        publicPath:website.publicPath
    },

配置完成後，你再使用webpack命令進行打包，你會發現原來的相對路徑改成了絕對路徑，這樣來說速度更快。

**總結：**這節課咱們實現了CSS的分離，並在分離後處理了圖片路徑不對的問題。處理路徑的方法必定要充分理解，由於這在工做中常常用到。

#第10節：圖片邁坑：處理HTML中的圖片

在webpack中是不喜歡你使用標籤來引入圖片的，可是咱們做前端的人特別熱衷於這種寫法，國人也爲此開發了一個：html-withimg-loader。他能夠很好的處理咱們在html 中引入圖片的問題。由於是國人開發的，文檔都是中文，因此學習起來仍是比較簡單的。因此在學習新課以前咱們先解決兩個小夥伴的問題。

視頻教程購買地址：https://www.edurt.com/my/course/167

只有項目安裝webpack，如何打包？有的小夥伴在學習視頻時，並無全局安裝webpack，而是使用了項目安裝。首先我要說的是，這種作法是webpack推崇的，webpack並不鼓勵全局安裝webpack。可是小夥伴看我視頻中直接在終端用webpack進行打包項目，他使用時會出現不是內部命令或者外部命令。

這時候須要配置package.json裏的scripts選項，咱們之前的課程已經學習了配置 webpack-dev-server命令，在這個命令下面咱們再加一個build命令進行打包項目使用。

"scripts": {
    "server": "webpack-dev-server --open",
    "build":"webpack"
  },

配置完成後，能夠在控制檯輸入npm run build 進行打包。

如何把圖片放到指定的文件夾下

前邊兩節課程，打包後的圖片並無放到images文件夾下，要放到images文件夾下，其實只須要配置咱們的url-loader選項就能夠了。

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'images/',
                   }
               }]
            }
          ]
    },

這回你再執行打包就能夠把圖片打包到images文件夾裏了。

html-withimg-loader

html-withimg-loader就是咱們今天的重點了，這個插件並非很火，也是我我的喜歡的一個小loader。解決的問題就是在hmtl文件中引入標籤的問題。

安裝：

npm install html-withimg-loader --save

配置loader

webpack.config.js

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

而後在終端中能夠進行打包了。你會發現images被很好的打包了。而且路徑也徹底正確。

總結：咱們經過三節課的時間講了webpack圖片中的坑，這些坑在我初學webpack初期給我帶來了很多的麻煩，我也算是傾囊相教了，但願小夥伴們有所收穫。在你工做中遇到圖片的問題，也能夠返回文章裏進行對比查找問題。

#第11節：CSS進階：Less文件的打包和分離

第05節中已經講過CSS文件的打包，後來又講了CSS分離。這節咱們講解一下Less文件如何打包和分離。Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。也就是說Less給咱們枯燥單一的樣式文件加入了編程機制，這讓咱們這些前端程序員很受用，因此在工做中大部分程序員都使用了Leess開發。

視頻教程購買地址：https://www.edurt.com/my/course/167

打包Less文件

安裝:

要使用Less，咱們要首先安裝Less的服務，固然也是用npm來進行安裝。

npm install --save-dev less

還須要安裝Less-loader用來打包使用。

npm n install --save-dev less-loader

寫loader配置：

安裝好後，須要在webpack.config.js裏編寫loader配置，固然要想正確解析成CSS，仍是須要style-loader和css-loader的幫助，可是這兩個loader前邊已經講過了，因此在這裏就不重複了，若是你還對這兩個loader不熟悉，那自行回去補前邊的第五節吧。

webpack.config.js

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}

編寫一個less文件

如今webpack的配置好了，咱們還須要編寫一個less文件，這裏明文爲black.less.裏邊只作一件是就是把一個層的背景設置成黑色。

black.less

@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}

這裏#gogo是層的ID名稱。@base是咱們設置的變量名稱。

引入到咱們entery.js文件中

import less from './css/black.less';

這樣咱們就能夠把less文件進行打包了。咱們可使用webpack命令打包試一試。

把Lees文件分離。

咱們以前講了extract-text-webpack-plugin這個插件，想把Less文件分離出來的方法跟這個幾乎同樣，以前的咱們在第09節中講過，這裏咱們就只講less的loader配置方法。（此處建議收看視頻）

{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

配置好後，你會發現less被分離到了index.css文件裏。

總結：Less是很是好的CSS擴展，可是Less得轉換稍顯麻煩，好的是webpack爲咱們提供了簡單輕鬆的轉換方法。但願小夥伴能夠學好這一課，在大家的工做中都開始使用Less編寫大家css代碼。

#第12節：CSS進階：SASS文件的打包和分離

上節課學習了Less的打包和分離，羣裏使用SASS的小夥伴立刻就不幹了，要求講一下SASS的配置，其實你會了Less得配置，SASS的配置能夠很輕鬆的學會，爲了公平公正，那咱們就用一節課的時間學一下SASS的配置的。

** 安裝SASS打包的loader **

這裏須要在項目目錄下用npm安裝兩個包。node-sass和sass-loader

node-sass：由於sass-loader依賴於node-sass，因此須要先安裝node-sass

npm n install --save-dev node-sass

sass-loader:

npm install --save-dev sass-loader

**注意：**在用npm安裝時，這個loader很容易安裝失敗，最好使用cnpm來進行安裝。若是你安裝一直報錯，最好是把node_modules文件夾刪除後，再從新安裝。

編寫loader配置

{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
}

Sass文件的編寫

寫好loader配置後，就能夠愉快的編寫sass文件拉，可是不要忘記把sass文件引入到entery.js中。

$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}

都完成後，你就能夠啓動咱們npm run server 來查看效果了。

把SASS文件分離。

{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

這節課算是專門爲sass使用者錄製的吧，其實總體過程和less的使用差很少，但願你能在工做中開始使用sass，並寫出漂亮的css代碼。

#第13節：CSS進階：自動處理CSS3屬性前綴

CSS3已經成了前端的必會技能，可是你必定爲那些屬性須要加前綴，那些屬性不須要加前綴而頭疼。之前我在課程中講過一個can i use的網站，能夠查詢這些，可是每次都查實在是編碼效率過低了。這節課咱們就學習一下如何經過postcss-loader給css3屬性自動添加前綴。

視頻教程購買地址：https://www.edurt.com/my/course/167

什麼是屬性前綴

咱們先來看一下代碼：

-webkit-transform: rotate(45deg);
        transform: rotate(45deg);

爲了瀏覽器的兼容性，有時候咱們必須加入-webkit,-ms,-o,-moz這些前綴。目的就是讓咱們寫的頁面在每一個瀏覽器中均可以順利運行。

PostCSS

PostCSS是一個CSS的處理平臺，它能夠幫助你的CSS實現更多的功能，可是今天咱們就經過其中的一個加前綴的功能，初步瞭解一下PostCSS。

安裝

須要安裝兩個包postcss-loader 和autoprefixer（自動添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

postcss.config.js

postCSS推薦在項目根目錄（和webpack.config.js同級），創建一個postcss.config.js文件。

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增長相應的css3屬性前綴。

編寫loader

對postcss.config.js配置完成後，咱們還須要編寫咱們的loader配置。

{
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]
}

提取CSS

配置提取CSS的loader配置.

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

總結:postcss還有不少功能，我但願小夥伴學會自學。這裏給出postcss-loader的github地址：https://github.com/postcss/postcss-loader

#第14節：CSS進階：消除未使用的CSS

像Bootstrap這樣的框架每每會帶有不少CSS。在項目中一般咱們只使用它的一小部分。就算咱們本身寫CSS，隨着項目的進展，CSS也會愈來愈多，有時候需求更改，帶來了DOM結構的更改，這時候咱們可能無暇關注CSS樣式，形成不少CSS的冗餘。這節課就學習用webpack消除未使用的CSS。

視頻教程購買地址：https://www.edurt.com/my/course/167

PurifyCSS

使用PurifyCSS能夠大大減小CSS冗餘，好比咱們常用的BootStrap(140KB)就能夠減小到只有35KB大小。這在實際開發當中是很是有用的。

安裝PurifyCSS-webpack

從名字你就能夠看出這是一個插件，而不是loader。因此這個須要安裝還須要引入。 PurifyCSS-webpack要以來於purify-css這個包，因此這兩個都須要安裝。

npmn  i -D purifycss-webpack purify-css

這裏的-D表明的是–save-dev ,只是一個簡寫。

引入glob

由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用。在webpack.config.js文件頭部引入glob。

const glob = `require`('glob');

引入purifycss-webpack

一樣在webpack.config.js文件頭部引入purifycss-webpack

const PurifyCSSPlugin = `require`("purifycss-webpack");

配置plugins

引入完成後咱們須要在webpack.config.js裏配置plugins。代碼以下，重點看標黃部分。

plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
 
]

這裏配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的文件，查找哪些css被使用了。

**注意：**使用這個插件必須配合extract-text-webpack-plugin這個插件，這個插件在前邊的課程已經講解過了。若是你還不會請自學一下。

配置好上邊的代碼，咱們能夠故意在css文件裏寫一些用不到的屬性，而後用webpack打包，你會發現沒用的CSS已經自動給你刪除掉了。在工做中記得必定要配置這個plugins，由於這決定你代碼的質量，很是有用。

#第15節：給webpack增長babel支持

在前端開發中都開始使用ES6的語法了，雖說webpack3增長了一些ES6的轉換支持，可是實際效果不是很好，也多是本人技術有限，沒發揮出真正的功能。因此我在開發中仍是喜歡添加Babel-loader的，我也查看了一些別人的webpack配置也都增長了babel-loader，因此這節課咱們學習一下如何增長Babel支持。（此節文章部份內容引用了zhangwang大神的文章內容）

視頻教程購買地址：https://www.edurt.com/my/course/167

Babel是什麼？ Babel實際上是一個編譯JavaScript的平臺，它的強大之處表如今能夠經過便宜幫你達到如下目的：

使用下一代的javaScript代碼(ES6,ES7….)，即便這些標準目前並未被當前的瀏覽器徹底支持。

使用基於JavaScript進行了擴展的語言，好比React的JSX。

Babel的安裝與配置

Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

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

cnpm c install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法以下：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

如今你已經能夠用webapck轉換ES6的語法兼容各個瀏覽器了，咱們能夠修改一下entry.js的代碼以下：

import css from './css/index.css';
{
    let jspangString = 'Hello Webpack'
    document.getElementById('title').innerHTML=jspangString; 
}

上面的代碼使用了ES6的let聲明方法。若是你不使用Babel來進行轉換，你會發現打包出來的js代碼沒有做兼容處理，使用了Babel轉換的代碼是進行處理過的。

.babelrc配置

雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項，若是卸載webapck.config.js中會很是的雍長不可閱讀，因此咱們常常把配置卸載.babelrc文件裏。

在項目根目錄新建.babelrc文件，並把配置寫到文件裏。

.babelrc

{
    "presets":["react","es2015"]
}

.webpack.config.js裏的loader配置

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}

ENV：

如今網絡上已經不流行babel-preset-es2015，如今官方推薦使用的是babel-preset-env,那咱們爲了緊跟潮流，咱們在講一下env的配置方法。

首先須要下載：

npm n install --save-dev babel-preset-env

而後修改.babelrc裏的配置文件。其實只要把以前的es2015換成env就能夠了。

{
    "presets":["react","env"]
}

總結：對於在React中Babel的使用，如何解析JSX，我會在後邊的課程做詳細瞭解，你們不要着急。在實際工做中仍是要安裝Babel的，這樣能更好的兼容每種瀏覽器，而把Babel的配置文件分解出來是最好的選擇。

#第16節：打包後如何調試

做爲一個程序員天天的大部分工做就是調試本身寫的程序，那咱們使用了webpack後，因此代碼都打包到了一塊兒，給調試帶來了麻煩，可是webpack已經爲咱們充分考慮好了這點，它支持生產Source Maps來方便咱們的調試。（敲黑板，這節可能偏理論一點。）

視頻教程購買地址：https://www.edurt.com/my/course/167

在使用webpack時只要經過簡單的devtool配置，webapck就會自動給咱們生產source maps 文件，map文件是一種對應編譯文件和源文件的方法，讓咱們調試起來更簡單。

四種選項

在配置devtool時，webpack給咱們提供了四種選項。

source-map:在一個單獨文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map,可是它會減慢打包速度；
cheap-module-source-map:在一個單獨的文件中產生一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號）,會對調試形成不便。
eval-source-map:使用eval打包源文件模塊，在同一個文件中生產乾淨的完整版的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定要不開啓這個選項。
cheap-module-eval-source-map:這是在打包文件時最快的生產source map的方法，生產的 Source map 會和打包後的JavaScript文件同行顯示，沒有影射列，和eval-source-map選項具備類似的缺點。

四種打包模式，有上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的打包速度的後果就是對執行和調試有必定的影響。

我的意見是，若是大型項目可使用source-map，若是是中小型項目使用eval-source-map就徹底能夠應對，須要強調說明的是，source map只適用於開發階段，上線前記得修改這些調試設置。

簡單的配置：

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

總結：調試在開發中也是必不可少的，可是必定要記得在上線前必定要修改webpack配置，在打出上線包。

#第17節：實戰技巧：開發和生產並行設置

一週沒有寫博客了，這一週都在出差（10月9-10月12日），確定有小夥伴等着看教程了，在這裏跟小夥伴說對不起了。這節詳細講講用webapck開發和生產（或者說開發和上線）的那些事。把小夥伴容易迷茫的幾個點講清楚。（從這篇開始強烈建議看視頻學習，文章很難表述個人意思）

視頻教程購買地址：https://www.edurt.com/my/course/167

依賴不一樣

一個項目中是有開發環境和生產環境的，這兩個環境的依賴也是不一樣的。

開發依賴：只在開發中用來幫助你進行開發，簡化代碼或者生成兼容設置的以來包。你能夠打開package.json來查看，devDependencies的下面的這些包爲開發使用的包。這些包在生產環境中並無用處。
生產依賴：就是好比咱們的js使用了jquery，jquery的程序要在瀏覽器端起做用，也就是說咱們最終的程序也須要這個包，這就是生產依賴。這些包在dependencies中。

npm安裝

假如咱們要在項目中使用jquery庫，這時候咱們通常有三種安裝方法，每種我都詳細講解一下。

第一種：

npm install jquery

安裝完成後，你會發如今package.json中並不存在這個包的依賴。若是你項目拷貝給別人繼續開發，或者別人和你git合做，再次下載項目npm install時就會缺乏這個jquery包。項目就會沒法正常運行，因此這也是咱們最不同意的安裝方法。

第二種：

npm n install jquery --save

安裝完成後，它存在於package.json的dependencies中，也就是說它是生產環境須要依賴的包（上線時須要的以來包）。

第三種：

npm install jquery --save-dev

安裝完成後，它存在於package.json的devDependencies中，也就是說它是開發環境中須要的，上線並不須要這個包的依賴。

安裝所有項目依賴包：

npm install

安裝生產環境依賴包：

npm install --production

配置生產和開發並行

咱們在之前的配置中設置了一個變量website，用於靜態資源正確找到路徑。那若是生產環境和開發環境不同，並且咱們須要來回切換，這時候咱們須要更好的設置方法。

var website={
    publicPath:"http://192.168.0.104:1717/"
}

修改package.json命令

其實就是添加一個dev設置，並經過環境變量來進行區分，下面是package.json裏的值。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webapck",
    "build": "set type=build&webpack"
  },

修改webpack.config.js文件

能夠利用node的語法來讀取type的值，而後根據type的值用if–else判斷。

if(process.env.type== "build"){
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    var website={
        publicPath:"http://cdn.jspang.com/"
    }
}

若是你說我想看一下傳過來的值究竟是什麼？能夠用下面的輸出語句。

console.log( encodeURIComponent(process.env.type) );

Mac下的package.json設置

MAC電腦下須要把set換成export，而且要多加一個&符，具體代碼以下。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&&webpack",
    "build": "export type=build&&webpack"
  },

#第18節：實戰技巧：webpack模塊化配置

如今的前端開發隨着ES6的普及已經大面積使用模塊化進行開發了，那在webpack.config.js配置文件中，如何進行模塊化開發那？例如把開發環境的寫到一個模塊中，把生產環境的寫到一個模塊中。這節課咱們就用一節課的時間學習一下webpack模塊化配置的技巧。

視頻教程購買地址：https://www.edurt.com/my/course/167

JS中的模塊化實現

先來看一下JavaScript如何實現模塊話開發。其實不少小夥伴都會這種操做，那咱們就當複習了，再預習一遍知識。看下面ES6中的模塊化代碼。

function jspang(){
    alert('jspang.com:'+'webpack');
}
module.exports=jspang;

上面的代碼是一個最簡單的es6模塊化寫法，咱們聲明瞭一個jspang方法，而且把這個方法用module.exports進行暴露出去。而後咱們在入口文件中用import進行引入，並進行使用。

import jspang from './jspang.js';
jspang();

咱們瞭解如何做Javascript的模塊化後，其實webpack的模塊化和上邊的過程很相似。

webpack模塊

爲了讓你們容易看懂，我把webpack.config.js中的entry入口文件進行模塊化設置，單獨拿出來製做成一個模塊。

首先在根目錄，新建一個webpack_config文件夾，而後新建entry_webpack.js文件，代碼以下：

entry_webpack.js

//聲明entry變量
const entry ={};  
//聲明路徑屬性
entry.path={
    entry:'./src/entry.js'  
}
//進行模塊化
module.exports =entry;

配置的模塊化代碼編寫好之後，須要在webpack.config.js中引入，注意這裏的引入只能使用require的方法。

const entry = require("./webpack_config/entry_webpack.js")

而後在入口文件部分，修改爲以下代碼：

entry:entry.path,

這時候你能夠再次使用npm run dev 進行測試，你會發現模塊化成功了。

**總結：**模塊化在實際工做中是必不可少的操做，可是如今的webpack教程還不多講到，你們必定要重視這節，由於若是你搞不清這節的內容，可能你看別人的配置也會看不明白。記得必定要動手練習操做，不然你下面的課程也沒辦法學習。

#第19節：實戰技巧：優雅打包第三方類庫

在工做中引用第三方的框架是必不可少的，好比引入JQuery或者Vue，可是不少小夥伴一遇到引入第三方的類庫時就不知道如何操做了。這節課就學習一下如何優雅並正確的用webpack引入第三方庫。（本節建議收看視頻學習）咱們講兩種打包的方法，小夥伴們能夠根據本身的喜愛選擇，我的認爲兩種都是比較不錯的。

視頻教程購買地址：https://www.edurt.com/my/course/167

引入JQuery

其實引用第三方庫的方法有不少種，可是有些並非很優雅，還有些方法會出現打包問題，技術胖在這裏介紹一下本身工做中引入第三方模塊的方法，咱們就拿JQuery爲例。小夥伴們要觸類旁通，學會後試着本身引入Vue試試。

安裝JQuery

npm install --save jquery

安裝時須要注意的時Jquery最終要在生產環境中使用，因此咱們這裏要使用–save進行安裝。

修改entry.js文件

安裝好後，還須要引入到咱們的entry.js中，這裏直接使用import進行引入就能夠。

import $ from 'jquery';

這裏引入是不須要咱們寫相對路徑的，由於jquery的包是在node_modules裏的，只要寫一個包名jquery，系統會自動爲咱們查找的。

引入好後咱們就能夠在entry.js裏使用jquery，咱們能夠加入下面的代碼，而後進行測試。

$('#title').html('Hello JSpang');

能夠看到上面是標準的jquery代碼，你可使用npm run server 進行測試，如今代碼順利運行了，這說明咱們引用的JQuery庫成功了。須要說的是你不只能夠在入口中進行引入，你還能夠在任何你須要的js中引入，webpack並不會重複打包，它只給咱們打包一次。

用plugin引入

若是你覺的上面的方法和webpack沒什麼關係，只是普通的引入，webpack只是負責了一下打包，這樣並無全局感。那再學習一種在webapck.config.js中配置的方法，這種不須要你在入口文件中引入，而是webpack給你做了全局引入。這個插件就是ProvidePlugin。

ProvidePlugin是一個webpack自帶的插件，Provide的意思就是裝備、提供。由於ProvidePlugin是webpack自帶的插件，因此要先再webpack.config.js中引入webpack。

constc  webpack = require('webpack');

在webpack.config.js裏引入必須使用require，不然會報錯的，這點小夥伴們必定要注意。

引入成功後配置咱們的plugins模塊，代碼以下。

plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
],

配置好後，就能夠在你的入口文件中使用了，而不用再次引入了。這是一種全局的引入，在實際工做中也能夠很好的規範項目所使用的第三方庫。

**總結：**每個項目均可能引入第三方類庫，而像Vue和Angular這樣的成熟框架都推出了本身的webpack框架，好比vue-cli。可是不少狀況仍是須要咱們手動更改這些配置好的webpack來適用於咱們的公司項目，因此這節課的知識也是在工做中常用的，但願小夥伴們必定要重視並進行練習。

#第20節：實戰技巧：watch的正確使用方法

初級開發階段，使用webpack-dev-server就能夠充當服務器和完成打包任務，但時隨着你項目的進一步完成，可能須要先後臺聯調或者兩個前端合併代碼時，就須要一個公共的服務器了。這時候咱們每次保存後手動打包顯然效率過低，咱們但願的場景是代碼發生變化後，只要保存，webpack自動爲咱們進行打包。這個工具就是watch，這節課咱們把wacht徹底學會，你會發如今開發中更加的駕輕就熟。

視頻教程購買地址：https://www.edurt.com/my/course/167

watch的配置

不少小夥伴認爲–warch直接使用就能夠，並無什麼須要講的。其實這只是初級的用法，可是在學習一種技術時，咱們必需要作到了解所有，也就是常說的知其然知其因此然。咱們看下面的配置代碼，我在代碼中已經作出瞭解釋。

watchOptions:{
    //檢測修改的時間，以毫秒爲單位
    poll:1000, 
    //防止重複保存而發生重複編譯錯誤。這裏設置的500是半秒內重複保存，不進行打包操做
    aggregateTimeout:500, 
    //不監聽的目錄
    ignored:/node_modules/, 
}

上邊的每一行配置我都做了說明，有時候你在沒配置的狀況下，直接用webpack –watch是不起做用的，這時候你須要進行配置這些選項。

配置好後，咱們就能夠痛快的使用watch了，在大型項目中，這大大加快了咱們的開發效率，不用反覆的手動打包了。

BannerPlugin插件

這個插件就是BannerPlugin，咱們使用後會在JS中加上咱們的版權或開發者聲明。

new webpack.BannerPlugin('JSPang版權全部，看官方免費視頻到jspang.com收看')

須要注意的是在使用這個插件以前必須引入webpack。

const webpack = require('webpack');

#第21節：實戰技巧：webpack優化黑技能

做爲一個程序員，不管是寫什麼程序都i要有一顆不斷優化的心。webpack在優化這條路上，也爲咱們做了不少配置，這節課咱們就看看工做中經常使用的webpack優化黑技能。

視頻教程購買地址：https://www.edurt.com/my/course/167

ProvidePlugin和import

在第19節中學習瞭如何引入第三方類庫，並引入了jquery，在引用JQuery時咱們用了兩種方法，第一種時import，第二種時使用ProvidePlugin插件。那兩種引入方法有什麼區別那?

import引入方法：引用後無論你在代碼中使用不適用該類庫，都會把該類庫打包起來，這樣有時就會讓代碼產生冗餘。
ProvidePlugin引入方法：引用後只有在類庫使用時，才按需進行打包，因此建議在工做使用插件的方式進行引入。具體的對比操做，會在視頻中演示，你會看出兩種引入方法的對比打包結果。差距仍是蠻大的。

抽離JQuery

上邊的方法只是優化的第一步，工做中你會發現，不適用的類庫幾乎咱們也不會引入，因此上邊只是一個必要操做的第一步。那每每把第三方類庫抽離出來，纔是最好的解決方法。

第一步：修改入口文件

抽離的第一步是修改入口文件，把咱們的JQuery也加入到入口文件中，看下面的代碼。

webpack.config.js

entry:{
        entry:'./src/entry.js',
        jquery:'jquery'
 },

第二步：引入插件

咱們須要引入optimize優化插件，插件裏邊是須要配置的，具體配置項看下面的代碼。

new webpack.optimize.CommonsChunkPlugin({
    //name對應入口文件中的名字，咱們起的是jQuery
    name:'jquery',
    //把文件打包到哪裏，是一個路徑
    filename:"assets/js/jquery.min.js",
    //最小打包的文件模塊數，這裏直接寫2就好
    minChunks:2
}),

minChunks通常都是固定配置，可是不寫是不行的，你會打包失敗。

filename是能夠省略的，這是直接打包到了打包根目錄下，咱們這裏直接打包到了dist文件夾下邊。

配置完成後，咱們能夠先刪掉之前打包的dist目錄，而後用webpack再次打包，你會發現jquery被抽離了出來，而且咱們的entry.js文件變的很小。

多個第三方類庫抽離

會了如何抽離Jquery，可是在實際開發中，咱們會引用不止一個第三方類庫，這時也須要抽離。咱們拿引入Vue爲例，看看如何抽離出來。

第一步:咱們先用npm 進行安裝。

npm instawll vue --save

注意這裏是–save，而不是–save-dev。由於這個類庫在生產環境中也是要使用的。

第二步：在入口配置中引入vue和jquery

entry:{
    entry:'./src/entry.js',
    jquery:'jquery',
    vue:'vue'
},

只是多比上邊多加了一個vue選項。

第三步：修改CommonsChunkPlugin配置

須要修改兩個位置：

第一個是在name屬性裏把原來的字符串改成數組，由於咱們要引入多個模塊，因此是數組；
第二個是在filename屬性中把咱們輸出的文件名改成匹配付[name],這項操做就是打包出來的名字跟隨咱們打包前的模塊。

下面是咱們修改的代碼，你能夠跟jquery抽離時對比一下。

new webpack.optimize.CommonsChunkPlugin({
    //name對應入口文件中的名字，咱們起的是jQuery
    name:['jquery','vue'],
    //把文件打包到哪裏，是一個路徑
    filename:"assets/js/[name].js",
    //最小打包的文件模塊數，這裏直接寫2就好
    minChunks:2
}),

配置好後，咱們就能夠在控制檯輸入webpack進行打包了。你會看到咱們預想的結果，jquery和vue都被咱們抽離出來了。

**總結：**在項目開發中，咱們很使用不少第三方類庫，那好的作法就是把第三方這些類庫所有抽離處理，這樣在項目維護和性能上都是不錯的選擇。但願學會這個技巧後，你也能在工做中使用上。

#第22節：實戰技巧：靜態資源集中輸出

工做中會有一些已經存在但在項目中沒有引用的圖片資源或者其餘靜態資源（好比設計圖、開發文檔），這些靜態資源有多是文檔，也有多是一些額外的圖片。項目組長會要求你打包時保留這些靜態資源，直接打包到制定文件夾。其實打包這些資源只須要用到copy-webpack-plugin。

視頻教程購買地址：https://www.edurt.com/my/course/167

使用copy-webpack-plugin copy-webpack-plugin就是專門爲咱們做靜態資源轉移的插件，不過它不一樣上兩節使用的插件，它是須要安裝的。

插件安裝

插件的安裝只要使用npm就能夠了。

cnpm c install --save-dev copy-webpack-plugin

若是在安裝過程當中出錯，你可使用npm來進行安裝。

引入插件

安裝好後，須要在webpack.config.js文件的頭部引入這個插件纔可使用。

constc  copyWebpackPlugin= require("copy-webpack-plugin");

配置插件

引入以後咱們就能夠在plugins裏邊進行配置插件了，咱們先看下面的插件配置代碼，而後再進行詳細講解。

new copyWebpackPlugin([{
        from:__dirname+'/src/public',
        to:'./public'
    }])

from:要打包的靜態資源目錄地址，這裏的__dirname是指項目目錄下，是node的一種語法，能夠直接定位到本機的項目目錄中。
to:要打包到的文件夾路徑，跟隨output配置中的目錄。因此不須要再本身加__dirname。

配置好後，咱們就可使用webpack 進行打包了，你會發現圖片按照咱們的配置打包了過去。

*總結：*你是否是覺的學習起來愈來愈容易了，由於你通過20多節課的學習，已經基本掌握了webpack的知識，剩下的就是不斷練習和在實際項目中發現新的需求，而後找到新的loader或者pulgin來解決你的問題。

#第23節：實戰技巧：Json配置文件使用

在實際工做中，咱們的項目都會配置一個Json的文件或者說API文件，做爲項目的配置文件。有時候你也會從後臺讀取到一個json的文件，這節課就學習如何在webpack環境中使用Json。若是你會webpack1或者webpack2版本中，你是須要加載一個json-loader的loader進來的，可是在webpack3.x版本中，你再也不須要另外引入了。

讀出Json內容

第一步：如今咱們的index.html模板中加入一個層，並給層一個Id，爲了是在javascript代碼中能夠方便引用。

<div id="json"></div>

第二步：到src文件夾下，找到入口文件，我這裏是entry.js文件。修改裏邊的代碼，以下：

var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;

這兩行代碼很是簡單，第一行是引入咱們的json文件，第二行駛寫入到到DOM中。

第三步：啓用咱們的npm run server 命令就能夠在瀏覽器中看到結果了。

說說熱更新

其實在webpack3中啓用熱加載至關的容易，只要加入HotModuleReplacementPlugin這個插件就能夠了。

new webpack.HotModuleReplacementPlugin()

如今只要你啓動 npm run server 後，修改index.html中的內容，瀏覽器能夠自動給咱們更新出最新的頁面。

但這裏說的熱加更新和咱們平時寫程序的熱加載不是一回事，好比說咱們Vue或者React中的熱更新，並非刷新整個頁面，而是一個局部更新，而這裏的更新是從新刷新了頁面。

這點小夥伴們要搞清楚。

**總結：**這節主要回答了兩個同窗的問題，這兩個問題在實際開發中也常常用到，因此我就總結成課，給小夥伴們講解一下，但願對大家有所幫助。

#第24節：劇終-webpack自學技巧傳授

原本打算在最後加一個多頁webpack實戰給你們的，可是這個要錄製10多節，因此決定再獨立出一套視頻教程給你們（固然這是免費的）。請關注個人博客（http://old.jspag.com）。

這節課我會教你們一些自學webpack的技巧，讓你們能夠再本教程結束後繼續自行精進，也算傾囊相授。（精彩內容視頻呈現，請關注視頻內容）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Webpack3.X版 學習全文

#第01節：認識WebPack的做用

#第02節：讓你快速上手一個Demo

#第03節：配置文件：入口和出口

#第04節：配置文件： 服務和熱更新

#第05節：模塊：CSS文件打包

#第06節：插件配置：配置JS壓縮

#第07節：插件配置：HTML文件的發佈

#第08節：圖片邁坑：CSS中的圖片處理

#第09節：圖片邁坑：CSS分離與圖片路徑處理

#第10節：圖片邁坑：處理HTML中的圖片

#第11節：CSS進階：Less文件的打包和分離

#第12節：CSS進階：SASS文件的打包和分離

#第13節：CSS進階：自動處理CSS3屬性前綴

#第14節：CSS進階：消除未使用的CSS

#第15節：給webpack增長babel支持

#第16節：打包後如何調試

#第17節：實戰技巧：開發和生產並行設置

#第18節：實戰技巧：webpack模塊化配置

#第19節：實戰技巧：優雅打包第三方類庫

#第20節：實戰技巧：watch的正確使用方法

#第21節：實戰技巧：webpack優化黑技能

#第22節：實戰技巧：靜態資源集中輸出

#第23節：實戰技巧：Json配置文件使用

#第24節：劇終-webpack自學技巧傳授

Webpack3.X版學習全文

#第04節：配置文件：服務和熱更新