webpack3學習筆記

時間  2019-11-09
標籤 webpack3 webpack 學習 筆記 简体版
原文   原文鏈接

地址：http://www.javashuo.com/article/p-vwjprlla-hd.htmljavascript

地址：https://www.chungold.com/my/course/32css

地址：http://jspang.com/2017/09/16/webpack3-2/html

代碼：https://github.com/zhaobao1830/webpack前端

1、認識webpack和安裝vue

    一、全局安裝webpack  npm install -g webpack（官網推薦在項目中獨立安裝）java

     二、作項目的時候，不能全局安裝，會出問題，須要在項目裏面新建package.json，經過這個安裝wenpack,，npm install --save-dev webpacknode

     備註：（1）全局安裝webpack後，能夠在cmd輸入webpack -v查看版本號 （2）全局安裝後，再項目中獨立安裝webpack的時候，無論package,json裏webpack版本號是多少，都是全局安裝的版本號 （3）沒有全局安裝webpack，在cmd輸入webpack -v，會報webpack不是內部命令或外部命令react

            解決（3）的方案：jquery

            在package.json裏面的scripts裏面加 "build": "webpack這行代碼就能夠，在終端運行npm run build就至關於webpack，原理是npm run build就會去找node_modules下的webpackwebpack

            npm run build src/entery.js dist/bundel.js至關於 webpack  src/entery.js dist/bundel.js

1  "scripts": {
2     "test": "echo \"Error: no test specified\" && exit 1",
3     "build": "webpack"
4   },

         在本地項目中安裝webpack如何查看版本（不能用webpack -v）：在node_modules裏面找到webpack，打開package,json，找到"_id"，它對應的就是webpack的版本

         

         還有一個辦法是：使用webpack打包項目，在打包時會顯示webpack的版本號

          

     三、webpack安裝失敗的解決辦法：查看網絡、查看node 版本、查看權限

     四、webpack是幹什麼的？ 打包（把多個js文件打包成一個js文件）、轉換（把sass、stylus、less等不標準的css轉換成標準的css，jade轉換成標準的js）、優化（如今的項目用到的東西好多，能夠用webpack進行優化）

2、讓你快速上手一個demo

     一、舊項目升級webpack有倆種方式：

          刪除node_modules，運行npm install ---save-dev webpack；(這個是隻有在新項目中，沒有其餘依賴模塊的狀況下使用)

          刪除node_modules，在package.json裏面，修改webpack的版本號，而後運行npm install（這是在老項目中，有不少依賴模塊下使用）

      二、使用webpack打包文件： cmd運行webpack 要打包的文件 打包後保存的文件 

3、讓你快速上手一個demo

      一、配置文件webpack.config.js的基本結構

      二、entry選項（入口配置）

      三、output選項（出口配置）

      四、多入口、多出口配置

    webpack.config.js

         

 1 const path=require('path');
 2 module.exports = {
 3   // 入口
 4   entry:{
 5     // 這個裏面的entry和entry2是隨便寫的(多入口)
 6     entry: './src/entry.js',
 7     entry2:'./src/entry2.js'
 8   },
 9   // 出口
10   output:{
11     // 這是Node寫法，表示的是絕對路勁
12     path:path.resolve(__dirname,'dist'),
13     // [name].js表示打包後的名字和打包前的一致（有幾個入口文件，就打包成同名的幾個出口文件）
14     // 這就是多出口
15     filename:'[name].js'
16   },
17   // 模塊，打包的時候，js轉換、圖片壓縮都在這個裏面配置
18   module:{},
19   // 插件，須要的插件都在這裏面配置
20   // 上面都是對象， 插件這個是數組，表示多個插件的意思
21   plugins:[],
22   // 配置開發時服務
23   devServer:{}
24 }

 

在src下新建entry.js和entry2.js

entry.js

1 document.getElementById("title").innerHTML = "testWebpack"

entry2.js

1 alert('tttt')

在根目錄新建dist文件夾，建立Index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="title"></div>
 9     <script src="entry.js"></script>
10     <script src="entry2.js"></script>
11 </body>
12 </html>

運行webpack，就會生成entry.js和entry2.js

 4、服務和熱更新

    一、 webpack-config.js下的devServer

     

 1 const path=require('path');
 2 module.exports = {
 3   // 入口
 4   entry:{
 5     // 這個裏面的entry和entry2是隨便寫的(多入口)
 6     entry: './src/entry.js',
 7     entry2:'./src/entry2.js'
 8   },
 9   // 出口
10   output:{
11     // 這是Node寫法，表示的是絕對路徑
12     path:path.resolve(__dirname,'dist'),
13     // [name].js表示打包後的名字和打包前的一致（有幾個入口文件，就打包成同名的幾個出口文件）
14     // 這就是多出口
15     filename:'[name].js'
16   },
17   // 模塊，打包的時候，js轉換、圖片壓縮都在這個裏面配置
18   module:{},
19   // 插件，須要的插件都在這裏面配置
20   // 上面都是對象， 插件這個是數組，表示多個插件的意思
21   plugins:[],
22   // 配置開發時服務
23   devServer:{
24     // 開發運行時監控的地方
25     contentBase:path.resolve(__dirname,'dist'),
26     // host不要填寫localhost，由於系統、映射表被人修改後，會映射不到
27     // host: "本機IP地址"
28     host: "192.168.0.104",
29     // 是否啓用服務器壓縮
30     compress: true,
31     port: 1830,
32     proxy: {
33       '/api': {
34         target: 'http://localhost:3300',
35         pathRewrite: { '^/api': '' },
36         changeOrigin: true,
37         secure: false // 接受 運行在 https 上的服務
38       }
39     }
40   }
41 }

 

     上面devServer是配置一個服務器

     二、安裝     npm install webpack-dev-server --save-dev

     三、package.json的配置  

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

      四、npm run server

       

 

       把這個在瀏覽器打開

       五、修改src下的js文件，頁面內容會自動刷新(webpack3.6以上，自帶熱更新)

       備註：只有新版本的webpack才能夠這樣。若是不能熱更新，查看webpack版本

5、打包css文件

       webpack在生產環境中有一個重要的做用就是減小http的請求數，就是把多個文件打包到一個JS裏面，這樣請求數量就能夠減小好多。

      Loaders

          Loaders是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提供額外的設置選項（可選）。

     打包css文件

       建立一個index.css文件

body{
  background-color: aqua;
}

    在entry.js裏面引入index.css

// 路徑必定要用相對路徑，以防其餘操做系統上不能用
import css from "./css/index.css";
document.getElementById("title").innerHTML = "hell zys";

     解析css文件須要的倆個loader：style-loader（處理css裏面的url路徑問題）和css-loader（講css插入到頁面的style裏）

     先使用npm進行安裝  npm install style-loader --save-dev和npm install css-loader --save-dev

     安裝好一會，就須要在webpack.base.js下進行配置

     

1   // 模塊，打包的時候，js轉換、圖片壓縮都在這個裏面配置
2   module:{
3     rules:[
4       {
5         test:/\.css$/,
6         (這出也可使用use，我看現成的項目，這塊都用的是Loader)loader: ['style-loader','css-loader']
          或者是 use:[{loader:"style-loader"},{loader:"css-loader"}]
7       }
8     ]
9   },

 

loader的三種寫法

       第一種寫法：直接用use

1 module:{
2         rules:[
3             {
4                 test:/\.css$/,
5                 use:['style-loader','css-loader']
6             }
7         ]
8     },

      第二種寫法：把use變成loader

1 module:{
2         rules:[
3             {
4                 test:/\.css$/,
5                 loader:['style-loader','css-loader']
6             }
7         ]
8     },

      第三種寫法：use+loader

 1  module:{
 2         rules:[
 3             {
 4                 test:/\.css$/,
 5                 use: [
 6                     {
 7                         loader: "style-loader"
 8                     }, {
 9                         loader: "css-loader"
10                     }
11                 ]
12             }
13         ]
14     },

  6、插件配置：配置JS壓縮

       js壓縮須要在plugins裏面進行配置，須要的插件是uglifyjs-webpack-plugin

      webpack.config.js

1 const uglify = require('uglifyjs-webpack-plugin');
2 
3   plugins:[
4     new uglify()
5   ],

     備註：若是在終端執行webpack，js代碼是能夠正常壓縮的；若是在終端執行npm run server，會報錯

     

     緣由是devServer和js壓縮發生衝突

     解釋：

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

     在實際開發中，webpack配置文件是分開的，開發環境一個文件，生產環境一個文件。

7、插件配置：HTML文件的發佈

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

       

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

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

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

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

    

1        new htmlPlugin({
2             minify:{
3                 removeAttributeQuotes:true
4             },
5             hash:true,
6             template:'./src/index.html'
7            
8         })
  • minify：是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。
  • hash：爲了開發中js有緩存效果，因此加入hash，這樣能夠有效避免緩存JS。
  • template：是要打包的html模版路徑和文件名稱。

8、css中引入圖片

      代碼：

      css： 

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5 }

      index.html

1    <div id=tupian></div>
2    <div id=title></div>

webpack.config.js

    

 1  rules:[
 2       {
 3         test:/\.css$/,
 4         use: ["style-loader", "css-loader"]
 5       },
 6       {
 7         test:/\.(png|jpg|gif)/ ,
 8         use:[{
 9           loader:'url-loader',
10           options:{
11             limit:500000
12           }
13         }]
14       }
15     ]
  • test:/\.(png|jpg|gif)/是匹配圖片文件後綴名稱。
  • use：是指定使用的loader和loader的配置參數。
  • limit：是把小於500000B的文件打成Base64的格式，寫入JS。

在css裏引入圖片，要打包成功，須要倆個Loader：url-loader和file-loader

   npm install --save-dev url-loader file-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。

 

9、css分離和publicPath

   在簡單項目中，js代碼會不多，css代碼不少，這時打包的時候須要把css代碼分離出來（webpack不支持這種行爲）

  可使用extract-text-webpack-plugin

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

   webpack.config.js引入   

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

在plugins中配置

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

修改rules裏面css部分

1     {
2         test: /\.css$/,
3         use: extractTextPlugin.extract({
4           fallback: "style-loader",
5           use: "css-loader"
6         })
7       },

這樣就能夠運行webpack打包了

可是打包後有個問題，css路徑不正確

解決辦法：

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

webpack.config.js 聲明一個對象，叫website。

1 var website ={
2   publicPath:"http://192.168.0.103:1717/"   ip是本機的ip地址  端口號是devServer裏配置的端口
3 }

修改output

1   output:{
2     path:path.resolve(__dirname,'dist'),
3     filename:'[name].js',
4     publicPath:website.publicPath
5   },

運行webpack打包後，相對路徑變成了絕對路徑

 

10、html圖片打包

    示例：

    在html頁面引入ing 圖片，打包後沒有成功

    

<div><img src="images/2.jpg"></div>

 解決辦法：

npm install --save-dev html-withimg-loader

webpack.config.js

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

這樣就能夠打包了

 11、打包Less文件

      先安裝Less  

npm install --save-dev less

    安裝less-loader  

npm install --save-dev less-loader

    loader配置webpack.config.js

    

 1 {
 2     test: /\.less$/,
 3     use: [{
 4            loader: "style-loader" // creates style nodes from JS strings
 5         }, {
 6             loader: "css-loader" // translates CSS into CommonJS
 7         , {
 8             loader: "less-loader" // compiles Less to CSS
 9         }]
10 }

建立一個less文件

1 @base:#000;
2 #tLess{
3   width:300px;
4   height:300px;
5   background-color:@base;
6 }

entry.js

1 // 路徑必定要用相對路徑，以防其餘操做系統上不能用
2 import css from './css/index.css';
3 import less from './css/black.less';
4 document.getElementById("title").innerHTML = "hell zys";

這時就能夠打包了（這時打包，less是在js裏面）

  如何把less打包的時候分離出來

webpack.config.js

 1  {
 2         test: /\.less$/,
 3         use: extractTextPlugin.extract({
 4           use: [{
 5             loader: "css-loader"
 6           }, {
 7             loader: "less-loader"
 8           }],
 9           // use style-loader in development
10           fallback: "style-loader"
11         })
12       }

備註：如何在運行 npm run server的時候自動打開頁面

在package.ison裏面，scripts裏的server裏，最後面加一個--open

1     "server": "webpack-dev-server --open"

 十三 、使用postcss自動給css加前綴

     安裝： postcss-loader和autoprefixer（自動添加前綴）

    

1 npm install --save-dev postcss-loader autoprefixer

    在根目錄下建立 postcss.config.js（用來配置postcss屬性）

    

1 module.exports={
2   plugins:[
3     require('autoprefixer')
4   ]
5 }

 webpack.config.js

    css部分進行配置

1 {
2         test: /\.css$/,
3         use: extractTextPlugin.extract({
4           fallback: "style-loader",
5           use: [{loader:"css-loader",options:{importLoaders:1}},'postcss-loader']  //使用{}是爲了能夠加參數options
6  }) 7 },

例子：

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5   transform: rotate(7deg);
6 }

    打包後

    

1 #tupian{
2   background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg);
3   width: 100px;
4   height: 100px;
5   -webkit-transform: rotate(7deg);
6           transform: rotate(7deg);
7 }

 十4、使用purifycss-webpack消除未使用的css

   咱們在項目中會引入bootstrap框架，有些css不會用到；隨着項目的複雜，有些css咱們沒有使用並且沒有刪除，打包的時候會把這些都打包進去

  安裝插件

   

npm i -D purifycss-webpack purify-css

   在webpack.config.js裏

    由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用，引入glob

    

const glob = require('glob');

引入purifycss-webpack

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

  plugins配置

   

1 new extractTextPlugin("css/index.css"),
2 new PurifyCSSPlugin({
3     paths: glob.sync(path.join(__dirname, 'src/*.html'))
4 })

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

注意：這個插件必定要有extractTextPlugin配合

使用了上面的操做後，咱們在打包的時候，就會把一些咱們沒有用到的css在打包中清除，減小打包後的大小

例子：

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5   transform: rotate(7deg);
6 }
7 .tt{
8   color: #bbbbbb;
9 }

 上面的tt沒有使用

打包後：

1 #tLess {
2   width: 300px;
3   height: 300px;
4   background-color: #000;
5 }

 

十5、使用babel編譯es六、es七、es8

      在前端開發中都開始使用ES6的語法了，雖說webpack3增長了一些ES6的轉換支持，可是實際效果不是很好，沒發揮出真正的功能。因此在開發中仍是喜歡添加Babel-loade   

     Babel是什麼？

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

  • 使用下一代的javaScript代碼(ES6,ES7….)，即便這些標準目前並未被當前的瀏覽器徹底支持。
  • 使用基於JavaScript進行了擴展的語言，好比React的JSX。

     

     Babel的安裝與配置

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

     

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

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

   

 1 {
 2     test:/\.(jsx|js)$/,
 3     use:{
 4         loader:'babel-loader',
 5         options:{
 6             presets:[
 7                 "es2015","react"
 8             ]
 9         }
10     },
11     exclude:/node_modules/
12 }

 測試：修改entry.js

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

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

 

.babelrc配置

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

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

.babelrc

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

.webpack.config.js裏的loader配置

1 {
2     test:/\.(jsx|js)$/,
3     use:{
4         loader:'babel-loader',
5     },
6     exclude:/node_modules/
7 }

ENV：

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

首先須要下載：

 

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

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

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

總結：在實際工做中仍是要安裝Babel的，這樣能更好的兼容每種瀏覽器，而把Babel的配置文件分解出來是最好的選擇。

第16節：打包後如何調試

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

在使用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只適用於開發階段，上線前記得修改這些調試設置。

簡單的配置：

1 module.exports = {
2   devtool: 'eval-source-map',
3   entry:  __dirname + "/app/main.js",
4   output: {
5     path: __dirname + "/public",
6     filename: "bundle.js"
7   }
8 }
9

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

 

十7、開發環境和生產環境並行

       

修改package.json命令

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

1 "scripts": {
2     "server": "webpack-dev-server --open",
3     "dev":"set type=dev&webapck",
4     "build": "set type=build&webpack"
5   },

修改webpack.config.js文件

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

1 if(process.env.type== "build"){
2     var website={
3         publicPath:"http://192.168.0.104:1717/"
4     }
5 }else{
6     var website={
7         publicPath:"http://cdn.jspang.com/"
8     }
9 }

若是想看傳過來的是什麼值，可使用下面的代碼

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

Mac下的package.json設置

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

1  "scripts": {
2     "server": "webpack-dev-server --open",
3     "dev":"export type=dev&&webpack",
4     "build": "export type=build&&webpack"
5   },

 

十8、webpack模塊化配置

    js中的模塊化

    建立一個zb.js

1 function zb() {
2   console.log('zb')
3 }
4 module.exports = zb

entry.js引入

1 import zb from 'zb.js'
2 
3 zb()

    

 webpack中的模塊化

      entry-webpack.js   

1 //聲明entry變量
2 const entry ={};
3 //聲明路徑屬性
4 entry.path={
5   entry:'./src/entry.js'
6 }
7 //進行模塊化
8 module.exports =entry;

      webpack.config.js引入（注意：這裏面引入不能用import，要用require） 

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

    十9、引入第三方類庫

npm install --save jquery

頁面中引入：

import $ from 'jquery

全局引入：

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

const webpack = require('webpack');

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

1 plugins:[
2     new webpack.ProvidePlugin({
3         $:"jquery"
4     })
5 ],

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

 

二10、watch的正確用法（沒有用過）

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

watch的配置

   webpack.config.js最下面

  

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

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

BannerPlugin插件

工做中每一個人寫的代碼都要寫上備註，爲的就是在發生問題時能夠找到當時寫代碼的人。有時候也用於版權聲明。

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

new webpack.BannerPlugin('1830')

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

const webpack = require('webpack');

這時在dist目錄下的entery.js已經加上了版權聲明。

二11、webpack優化之抽離第三方組件庫

   在項目中，咱們會引入多個第三方組件庫（如：jquery），打包之後，會所有打包進入口文件，使得入口文件太大，這時候就須要把第三方組件剝離出來單獨打包

ProvidePlugin和import

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

  • import引入方法：引用後無論你在代碼中使用不適用該類庫，都會把該類庫打包起來，這樣有時就會讓代碼產生冗餘。
  • ProvidePlugin引入方法：引用後只有在類庫使用時，才按需進行打包，因此建議在工做使用插件的方式進行引入。

具體的對比操做，會在視頻中演示，你會看出兩種引入方法的對比打包結果。差距仍是蠻大的。

抽離JQuery

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

第一步：修改入口文件

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

webpack.config.js

1 entry:{
2         entry:'./src/entry.js',
3         jquery:'jquery'
4  },

第二步：引入插件

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

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

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

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

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

多個第三方類庫抽離

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

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

npm instawll vue --save

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

1 entry:{
2     entry:'./src/entry.js',
3     jquery:'jquery',
4     vue:'vue'
5 },

第三步：修改CommonsChunkPlugin配置

須要修改兩個位置：

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

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

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

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

總結：在項目開發中，咱們很使用不少第三方類庫，那好的作法就是把第三方這些類庫所有抽離處理，這樣在項目維護和性能上都是不錯的選擇。

 

二12、靜態資源打包輸出

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

使用copy-webpack-plugin

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

插件安裝   

npm install --save-dev copy-webpack-plugin

引入插件

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

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

配置插件

引入以後咱們就能夠在plugins裏邊進行配置插件了

1 new copyWebpackPlugin([{
2         from:__dirname+'/src/public',
3         to:'./public'
4 }])
  • from:要打包的靜態資源目錄地址，這裏的__dirname是指項目目錄下，是node的一種語法，能夠直接定位到本機的項目目錄中。
  • to:要打包到的文件夾路徑，跟隨output配置中的目錄。因此不須要再本身加__dirname。

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

 

二十3、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文件。修改裏邊的代碼，以下：

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

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

 

小技巧：

一、npm run dev之後自動打開瀏覽器，config裏的index.js，dev裏面的autoOpenBrowser設置爲true

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程