webpack入門

• webpack是一個進階中高級前端的必經之路
• 作用 :
  • 代碼轉譯
  • 模塊合并
  • 混淆壓縮
  • 代碼分割
  • 自動重繪
  • 代碼校驗
  • 自動部署

安裝 ;

• npm i webpack w}ebpack-cli -G 全域安裝
• npm i webpack webpack-cli -D 專案安裝
• npx webpack --config lovevivi.config.js 自定義webpack.config.js
• npm init生成webpack.json組態檔
• npx webpack 打包

 // webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode:"development"
}

module.exports里面的配置

• entry : 打包的入口檔案
• output : 打包后
  • path : 運行webpack指令 把檔案打包去到的檔案夾 必須是絕對路徑
  • filename : 打包后的檔案的名字
• mode　　是否壓縮 默認是production (如果不寫mode 會報警告)
  • development 不壓縮
  • production 壓縮

// webpack.json
"scripts": {
    "bind": "npx webpack --config lovevivi.config.js"
  },
      
      // 在cmd  運行npm run bind 就會執行lovevivi.config.js 而不是webpack.config.js了

自動編譯 :

• watch
  • 直接在webpack后面加–watch 不然npx webpack --watch
  • 或者直接在webpack.config里面 watch:true
• webpack-dev-server
  • 下載npm i webpack-dev-server
  • 作用 : 可以開啟一個服務器 實作熱更新 (注 熱更新不在是dist檔案了 而是運行在根目錄)
  • 開啟 ： npx webpack-dev-serve
  • 指令配置 ：
    • –open 自動打開
    • –port 5000 自定義埠
    • --contentBase ./src 自定義當前埠運行的檔案
    • hot 熱模塊更替
    • compress 壓縮

插件 html-webpack-plugin

• 作用 我們用webpack打包的js代碼是在記憶體中 不在檔案夾里面 而我們打包的js在dist中 這樣會造成影響

• 安裝npm i html-webpack-plugin -D

• 使用 :

  // webpack.config.js
  const HtmlWebacpckPlugin  = require('html-webpack-plugin');
  module.exports = {
      plugins:[
          new HtmlWebacpckPlugin({
              filename:"", // 生成的html檔案名字
              template:"", // 需要轉義的html檔案路徑
          })
      ]
  }
  

  • 匯入 : const HtmlWebacpckPlugin = require('html-webpack-plugin');
  • filename 生成的html檔案名字
  • template 需要轉義的html檔案路徑

處理內部資源檔案 :

處理css

• loader

  • 安裝 : npm i css-loader style-loader -D 安裝css-loader 和style-loader到專案

  • 在打包入口檔案中匯入需要用到的css (webpack會利用style-loader決議為style標簽)

  • // webpack.config.js
    module:{
            rules:[
                {
                    /* 正則匹配檔案 */
                    test: /\.css$/,
                    /* webpack加載動態資源是從右止左執行的
                        css-loader 是決議css
                        style-loader是吧決議后的css放到行內樣式
                    */
                   use: ['style-loader', 'css-loader']
                }
            ]
        }
    

    • test 正則匹配檔案
    • use 需要執行的決議方法 默認是從右到左
      • css-loader 決議css
      • style-loader 將決議后的css放到行內樣式里面

處理less和scss

• 安裝 ; npm i less less-loader sass-loader node-sass -D

• // webpack.config.js
  module:{
          rules:[
              {
                  /* 正則匹配檔案 */
                  test: /\.css$/,
                  /* webpack加載動態資源是從右止左執行的
                      css-loader 是決議css
                      style-loader是吧決議后的css放到行內樣式
                  */
                 use: ['style-loader', 'css-loader']
              },
              {
                  test:/\.less$/,
                  use:['style-loader','css-loader','less-loader']
              },
              {
                  test:/\.s(a|c)ss$/,
                  use:['style-loader','css-loader','scss-loader']
              }
          ]
      }
  

處理圖片和字體圖示 :

• 利用 file-loader或者url-loader

• // webpack.config.js
  /* {
                  test:/\.(jpg|jpeg|png|bmp|gif)$/,
                  use:'file-loader'
              } */
              {
                  test:/\.(jpg|jpeg|png|bmp|gif)$/,
                  use:{
                      loader:'url-loader',
                      options:{
                          limit:30 * 1024,
                          outputPath:'images',
                          name:'[name]-[hash:4].[ext]'
                      }
                  }
              }
  

  • file-loader 下載 npm install file-loader -D
    • test 配置 需要轉換的檔案 — 正則
    • use 使用file-loader
  • url-loader 下載 npm install file-loader url-loader -D
    • 區別 url-loader更加靈活,可以添加更多屬性 比較圖片小于多少就轉成base64
    • loader : 需要用到的loader
    • options : 配置們
      • limit 小于多少就轉base64
      • outputPath 檔案打包后的指定檔案夾 (在dist后面)
      • name 檔案打包后的指定檔案名 不能寫死 不然多個圖片的吧 后面會把前面覆寫
        • 變數 name 當前檔案名的名字
        • 變數 hash 亂數 hash: 保留多少位亂數
        • 變數 ext 當前檔案名后綴

處理js 利用babel

• 在js中 因為版本不斷在更新es5 es6 es7 .... 有些高級語法 瀏覽器不支持 就的要用到babel來轉換

• 下載 npm i babel-loader @babel/core @babel/preset-env webpack -D

  			// webpack.config.js
  			{
                  test : /\.js$/,
                  use:{
                      loader:'babel-loader',
                      options:{
                          presets:['@babel/env']
                      }
                  }
              }
  

  • presets 需要用到的babel語法
  • plugins 需要用到babel的其他語法轉換 陣列形式 詳細請看babel的官網

source map的使用 :

作用 : 可以定位到日志的行數

插件 :

• clean-webpack-plugin

  • 作用 每次打包刪掉dist

  • 安裝 npm i clean-webpack-plugin -D

  • // webpack.config.js
    const cleanWebpackPlugin = require('clean-webpack-plugin')
    plugins[
    	new cleanWebpackPlugin()
    ]
    

• copy-webpack-plugin

  • 作用 : 在根目錄webpack不會打包 用copy-webpack-plugin插件解決

  • 安裝 npm i copy-webpack-plugin

  • 使用

  • // webpack.config.js
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
        plugins[
    	new CopyWebpackPlugin([
          {
            from: path.join(__dirname, 'assets'),
            to: 'assets'
          }
        ])
    ]
    

  • from 那個檔案

  • to 打包去哪里

BannerPlugin

這是一個webpack的內置插件，用于給打包的JS檔案加上著作權注釋資訊

1. 引入webpack

   const webpack = require('webpack')
   

2. 創建插件物件

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'assets'),
           to: 'assets'
         }
       ]),
       new webpack.BannerPlugin('啦啦啦!')
     ],
   

copy-webpack-plugin

1. 安裝插件

   npm i copy-webpack-plugin -D

2. 引入插件

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   

3. 使用插件, 在plugins中插件物件并配置源和目標

   from: 源, 從哪里拷貝, 可以是相對路徑或絕對路徑, 推薦絕對路徑

   to: 目標, 拷貝到哪里去, 相對于output的路徑, 同樣可以相對路徑或絕對路徑, 但更推薦相對路徑(直接算相對dist目錄即可)

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new copyWebpackPlugin({
               patterns:[
                   {
                       from:path.join(__dirname,'assets'),
                       to:'assets'
                   }
               ]
           })
     ],
   

webpack高級

HTML中img標簽的圖片資源處理

1-安裝npm install -S html-loader

2-配置:

// webpack.config.js
// loader里面配置
{
       test: /\.html$/i,
       loader: 'html-loader',
}

多頁面打包 :

• 01- 改入口檔案 entry

  • 以前單頁面的入口檔案 entry : ‘./src/main.js’
  • 現在是多頁面所以要改成物件 entry:{main:"./src/main.js",study:’./src/study.js’}

• 02 - 改出口檔案 output

  • 以前單頁面的出口檔案 output:{filename:‘main.js’}
  • 多頁面不可能只生成一個js 所以要用變數 output:{filename:’[name].js’}

• 03 - 如果用了html-webpack-plugin這個插件 也要改這個插件

  • 以前 : new htmlWebpackPlugin({ilename: ‘index.html’,emplate: ‘./src/index.html’}),
  • 現在 : 有一個頁面就new幾個htmlWebpackPlugin物件
  • 注意點 : 如果只是有幾個寫一個htmlWebpackPlugin函式的話 那么每個html的會匯入所以的js所以我們要用chunks來配置 吧需要用到的js寫進去

• 案列

  • // 單頁面
    entry: main:'./src/main.js'
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'main.js'
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html',
            }),
        ],
    
    // 多頁面
    entry: {
            main:'./src/main.js',
            study:'./src/study.js'
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].js'
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html',
                chunks:['main']
            }),
            new htmlWebpackPlugin({
                filename: 'study.html',
                template: './src/study.html',
                chunks:['study']
            }),
        ],
    

第三方庫的兩種引入方式

• 可以通過expose-loader進行全域變數的注入，同時也可以使用內置插件webpack.ProvidePlugin對每個模塊的閉包空間，注入一個變數，自動加載模塊，而不必到處 import 或 require

• 安裝 : npm i -D expose-loader

• 作用 : webpack匯入的第三方庫其實默認是在閉包里面 , 而我們每次使用的需要去import或者require一下 不能在全域訪問 所以就很麻煩 如下代碼 :

• const $ = require('jquery')
  $('body').css({backgroundColor:'pink'})
  console.log($);
  console.log(window.$);
  
  /*
  		我們下載了jquery模板(npm i jquery) 然后匯入就可以使用jquery的語法  眾所周知 : jquery其實就是封裝了js的一個函式   我們之間列印$就可以列印出這個函式
  		但是我們列印window.$確是undefined   所以我在每個js使用jquery的要先匯入就很麻煩  所以就要用到expose-loader這loader吧區域變數注入到window中
  */ 
  

• // webpack.config.js
  {
                  test: require.resolve('jquery'), // 找到jquery的絕對路徑
                  use: {
                    loader: 'expose-loader',// 使用的loader
                    options: { 
                      exposes:'$' // 需要掛載的變數
                    }
                  }
                }
  
  // js
  $('body').css({backgroundColor:'pink'})
  console.log($);
  console.log(window.$);
  // 經過配置之后  吧$掛載到window下面
  
  

第二種方法 : ProvidePlugin

• 利用webpack的屬性ProvidePlugin來掛載到全域

• 代碼如下

• // webpack.config.js
  const webpack = require('webpack')
  
  new webpack.ProvidePlugin({
      $:'jquery', // 鍵和值  
      jQuery:'jquery'
  })
  

題外話 : 關于require和import的區別

• require 是common.js的規范 用于nodejs不能運行在瀏覽器

  • 暴露 module.exports = XXX
  • 匯入 const bar = require('./bar')

• import 是es6的匯入語法 可以用于瀏覽器

  • 暴露 export default bar
  • 匯入 import bar from ‘./bar’
  • exclude 黑名單 不需要打包的檔案
  • include 白名單 需要打包的檔案