webpack的詳細使用

時間 2019-12-12

標籤 webpack 詳細使用简体版

原文原文鏈接

webpack做用：

打包（能夠將多個文件打包成一個文件，能夠下降訪問次數，減輕服務器的壓力）。
轉換（sass, less,typescript,es6,jsx）對於瀏覽器不兼容的作轉換。
優化（單頁面應用愈來愈普及，前端的邏輯愈來愈複雜）。

webpack安裝：

全局javascript

npm install -g webpack
     若是你使用的是 webpack 4+ 版本你還須要安裝 cli 
     npm install -g webpack-cli
複製代碼

安裝成功後查看版本號css

webpack -v
複製代碼

本地安裝html

npm install --save-dev webpack
     若是你使用 webpack 4+ 版本，你還須要安裝 CLI
     npm install --save-dev webpack-cli
複製代碼

不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。前端

webpack的結構

webpack須要傳入一個配置對象，它的主要結構有：vue

mode : 模式。模式分爲兩種：（1）生產模式（production）,該模式的代碼是壓縮之後的，供上線使用。（2）開發模式（development）,該模式的代碼沒有進行壓縮，供開發使用。java
entry : 入口 --》表示我要將誰進行打包。node
output : 出口 --》表示將打包後的文件放到哪裏。webpack
devServer : 服務器設置 --》熱更新，服務器代理，自動打開瀏覽器。es6
plugins : 插件。web
loader是：轉換。實現兼容，sass 、less 、jsx。

在學習 webpack 如何打包以前，首先要學習下 Node.js 的一個內置模塊 path 和 __dirname 這個全局變量

__dirname 獲取所處文件的所在目錄（絕對路徑）

console.log（__dirname） 
      // Users/bu/Desktop/learn/webpack/src
複製代碼

path 模塊是 node.js 的一個內置模塊，與 __dirname 能夠防止不一樣操做系統之間的文件路徑問題

// path.join() 用於將兩個地址進行合併，生成一個絕對地址
     console.log(path.join(__dirname,"dist"));
     console.log(path.join(__dirname,"./dist"));
     console.log(path.join(__dirname,"../dist"));
     console.log(path.join(__dirname,"/dist"));
     
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/dist
     /Users/bu/Desktop/learn/webpack/src/dist

     // path.resolve() 與 path.join() 其餘都同樣，路徑合併， 可是隻有一個 「/」 則認爲進入到盤符下面 
     console.log(path.resolve(__dirname,'dist'));
     console.log(path.resolve(__dirname,'./dist'));
     console.log(path.resolve(__dirname,'../dist'));
     console.log(path.resolve(__dirname,'/dist'));
     
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/dist
     /dist
複製代碼

打包 ( 同名文件會進行覆蓋 )

零配置打包：你不須要進行配置，只須要命令行輸入 webpack 就會進行打包

沒有進行任何配置，自動將 src 文件下的 index.js 文件，打包到 dist 下的main.js 裏面
初次打包： webpack ./src/index.js --output ./dist/bundle.js --mode development // 表示將src文件中的index文件打包到 dist 文件中的bundle文件中，模式爲開發模式 // --mode 爲可選不寫則默認爲生產模式
在package.json 文件中進行配置，使用 npm run + "你設置的指令名稱" 進行打包

注意：使用 npm init 能夠便捷的建立 package.json 文件
```
"scripts": {
    "build" : "webpack ./src/index.js --output ./dist/bundle.js --mode production"
  }
複製代碼
```
可是爲了不將全部的配置都寫在package.json 中，因此添加一個 webpack.config.js 文件進行配置，而後使用指令 "webpack" 進行觸發配置。固然webpack的配置文件也能夠不叫 webpack.config.js ,能夠本身命名如： buzhanhua.config.js 。可是觸發指令則變爲：

webpack --config buzhahua.config.js
```
const path = require('path');
  module.exports = {
      mode : "development",
      entry : "./src/index.js",
      output : {
      path : path.resolve(__dirname,'./dist'), // path 必須是一個絕對路徑 若使用 "/" 則打包到盤符底下
      filename : 'bundle.js'
  }
  }
複製代碼
```

如何將多個文件打包到一個文件中？

const path = require('path');
     module.exports = {
         mode : "development",
         entry : [   //  以數組的形式
              "./src/index.js",
              "./src/index1.js"
         ],
         output : {
              path : path.resolve(__dirname,'./dist'),
             filename : 'bundle.js'
         }
     }
複製代碼

如何將多個文件打包到多個文件中？

const path = require('path');
     module.exports = {
          mode : "development",
          entry : {    // 以對象的形式
               index : './src/index.js',
               index1 : './src/index1.js'
             },
         output : {
             path : path.resolve(__dirname,'./dist'),
             filename : '[name].bundle.js'  // name 接收 entry 中的key 做爲文件名的前綴 ，進行分文件
             }
        }
複製代碼

plugins : 插件

一. html-webpack-plugin : 以某個頁面爲模板，在內存中生成HTML頁面的插件（也能夠理解爲：實現對HTML的一些控制，將指定的JS放進HTML當中）。

使用：

下載：

npm install html-webpack-plugin webpack webpack-cli --save-dev
順便說一下 --save-dev 也能夠換成 -D

引入：

const HTMLWebpackPlugin = require("html-webpack-plugin")
複製代碼

使用：

plugins : [
      new HTMLWebpackPlugin()
  ]
複製代碼

用法
```
plugins : [
         new HTMLWebpackPlugin({
              template : './src/test.html',
              filename : 'haha.html',
              title : "我是主頁謝謝",
              arr : [1,2,3,4],
              chunks : ["index"]
       }),
         new HTMLWebpackPlugin({
              minify : {
                   collapseWhitespace : true, // 壓縮空白
                   removeAttributeQuotes : true // 刪除屬性雙引號
               },
              template : './src/test1.html',
              chunks : ["index1"],
               hash : true
      })
      ]
複製代碼
```
屬性註釋：

template : "模板的路徑即便用誰作模板" ，注意這裏只是指定誰是模板，生成文件的名字與其無關，若是不定義filename 則生成文件的名字默認是 index.html

filename : 指定打包完的文件名稱（生成文件的名稱）

chunks : 用於設置打包完的JS是否進行嵌入，chunks 接收一個數組，能夠嵌入多個，對應的成員是entry的key 值。若不想嵌入則 [""] 便可

minify : 壓縮

hash : 清緩存，就是在嵌入的js路徑後追加一個後綴，保證惟一性
```
<script type=text/javascript src=index.bundle.js?36c17b8a44d43558e6da></script>
複製代碼
```
而對於，title ,arr等則是本身定義的一些數據，能夠在模板中使用
```
<!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><%=htmlWebpackPlugin.options.title%></title>
          </head>
      <body>
           <% for(var i = 0 ; i < htmlWebpackPlugin.options.arr.length ; i++){%>
               <p><%=htmlWebpackPlugin.options.arr[i]%></p>
           <%}%>
      </body>
      </html>
複製代碼
```
如同百度模板同樣 <% %> 至關於開闢出一塊js 空間可寫js代碼，<%=%> 則是使用數據，注意在使用數據時從 htmlWebpackPlugin.options 中獲取

二、clean-webpack-plugin : 刪除指定的文件夾，多用於在打包以前將某個文件夾刪除
1. 下載
  
  npm install clean-webpack-plugin -D
2. 引入
  
  const CleanWebpackPlugin = require("clean-webpack-plugin")
3. 使用
  
  plugins : [ new CleanWebpackPlugin(['dist']) ]
  
  注意：要將它放到全部操做以前，表示在打包以前將dist 文件刪除，如果放在最後則會將打包後的文件給刪掉了

devServer : 服務器（對象）

下載

npm install webpack-dev-server -D

webpack.config.js 中配置

devServer : {
          contentBase : path.join(__dirname,'./dist'), // 設置網站根目錄
          host : "localhost", // 端口
          port : 8000, // 端口號
          open :true // 是否自動開啓
  },
複製代碼

package.json 中配置
```
"script" : {
      "dev" : "webpack-dev-server --open"
  }
複製代碼
```
注意：在指令後添加 --open 可使其自動開啓，webpack.config.js中設置這裏就不須要設置了，有一個就能夠

loader 轉換

注意：webpack默認只能處理JS類型的文件，對於其餘文件則須要使用第三方包（loader）進行轉化

執行過程以下：

發現要處理的文件不是JS，就會去配置文件中找對應的loader。
若是能夠匹配對應的規則，則會調用對應的loader進行處理。
調用順序，從後向前，每一個loader的處理解果會向後面的loader進行傳遞。
當最後一個loader調用完畢，將最終結果交給webpack進行打包，最終輸出到打包文件。

配置方式：

// 在webpack配置文件中
     module : {
         rules : [
             {
                  test : /\.css$/,
                  use : ['style-loader','css-loader']
             },
         ]
        }
複製代碼

處理css文件

安裝

npm install style-loader css-loader -D

配置

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

處理less文件

安裝

npm install style-loader css-loader less-loader less(該報是less-loader 內部依賴不須要use中使用) -D

配置

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

處理sass文件

安裝

npm install style-loader css-loader sass-loader node-sass(該報是sass-loader 內部依賴不須要use中使用) -D

配置

{ test : /.scss$/, use : ['style-loader','css-loader','sass-loader']}

處理圖片

安裝

npm install url-loader file-loader(內部依賴) -D

配置

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=90000&name=[hash:8]-[name].[ext]'}

注意：

給loader傳參的時候和URL徹底同樣， limit 的單位是字節 byte 大於或等於這個值的時候，將不會將圖片轉爲base64 小於的時候則會轉爲 base64（提升頁面加載速度的方式之一就是減小頁面的二次請求數量，）。
name字段能夠定義輸出的圖片名稱，默認會將名稱設置爲hash值，這麼作的目的是爲了防止圖片名稱重複（由於都會將圖片託管到根目錄）。

處理字體

安裝

npm install url-loader file-loader(內部依賴) -D

配置

{test:/.(ttf|eot|svg|woff|woff2)$/,use : 'url-loader'}

babel轉換es6以上的語法

安裝

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

註釋： "babel-plugin-" 後是插件的名稱， "babel-preset-" 後是語法名稱

配置

在modele節點中的rules數組中，添加一條新的匹配規則

{
            test : /\.js$/,
            use : 'babel-loader',
            exclude : /node_modules/
        }
複製代碼

exclude表示排除的意思，排除node_modules的緣由以下：

不排除node_modules,babel則會將node_modules中的全部第三方JS文件進行翻譯打包，第三方包確定都是編譯好的，這樣作的是無用功。而且這樣會很是消耗CPU，同時打包速度很是慢。
不排除就算打包完成了，項目也是沒法運行的。

配置babel

在項目的根目錄下創建一個.babelrc 文件，該文件中必須嚴格符合JSON語法。

{
          "presets": ["env","stage-0"],
          "plugins": ["transform-runtime"]
     }
複製代碼

presets 中放置語法， plugins 放置插件

resolve 更改引入包的默認路徑

import Vue from 'vue';

包查找規則：

找尋項目中有沒有node_modules 文件夾。
在node_modules中根據包名找到對應文件。
在該文件中找到該包的包配置文件package.json
package.json 文件中的main屬性指定了該包被加載時候的入口文件。

下面有兩種方式改變：

1、更改引入方式

import Vue from '../node_modules/vue/dist/vue';

2、更改webpack配置

在webpack配置對象中添加新的節點resolve , 以下：

resolve : {
         alias : {
             "vue$":"vue/dist/vue.js"
      }
     }
複製代碼

表示以vue結尾的引入時，在後面的路徑文件中引入

相關標籤/搜索

每日一句

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