webpack

• webpack是一種前端資源構(gòu)建工具，一個靜態(tài)模塊打包器，在webpack看來，前端所有資源文件都會作模塊處理，它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，打包生成對應(yīng)的靜態(tài)資源
• 使用 npm 安裝 webpack 同時需要安裝 webpack-cli
• npm install webpack webpack-cli -D

webpack五個核心概念

• Entry 入口指示webpack以哪個文件為入口起點開始打包，分析構(gòu)建內(nèi)部依賴圖
• Output 指示webpack打包后的資源bundles輸出到哪里
• Loader 讓webpack能夠處理那些非js文件
• Plugins 插件功能，可以用于打包優(yōu)化和壓縮，重新定義環(huán)境變量等功能
• Model 指示webpack使用相應(yīng)模式的配置
  • development 能讓代碼本地調(diào)試運行的環(huán)境
  • production 能讓代碼優(yōu)化上線運行的環(huán)境

webpack打包css

• 分別用到3個包less-loader,css-loader,style-loader
• 還需要下載less

webpack打包html

• 下載html-webpack-plugin

webpack.config.js

• webpack的配置文件
• 所有構(gòu)建工具都是基于node.js平臺運行的，模塊化操作默認采用commonjs
• webpack只能理解javascript和json文件，loader讓webpack能夠去處理其他類型的文件，并將他們轉(zhuǎn)為有效的模塊

//用來拼接路徑
const {resolve} = require('path')
module.exports = {
  //入口起點
  entry: './src/index.js',
  //輸出
  output: {
    //輸出文件名
    filename: 'built.js',
    //輸出路徑
    path: resolve(__dirname,'build')
  },
  //loader的配置
  module: {
    rules: [
      //詳細loader配置
      {
        //打包css資源
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          //下載less-loader還得下載less
          //將less轉(zhuǎn)化成css
          'less-loader'
        ],
      }
    ]
  },
  // plugins的配置
  pligins: [

  ],
  //模式
  mode: 'development',
  //mode: 'production'
}

ESmodules 和 CommonJS

• ESmodules中可以導(dǎo)入Commonjs模塊
• CommonJS中不能導(dǎo)入ESmodules模塊
• CommonJS始終只會導(dǎo)出一個默認成員
• 注意import不是解構(gòu)導(dǎo)出對象

圖片打包

• 安裝url-loader插件
• 小文件使用Data URLs,減少請求次數(shù)
• 大文件單獨提取存放，提高加載速度

webpack處理es6轉(zhuǎn)換

• 引入babel-loader，@babel/core，@babel/preset-env

webpack兼容多種模塊化標準

• 遵循ESmodules標準的import聲明
• 遵循CommonJS標準的require函數(shù)
• 遵循AMD標準的define函數(shù)和require函數(shù)
• 樣式代碼中的@import指令和Url函數(shù)
• HTML代碼中圖片標簽的src屬性

webpack 插件

• 自動清除輸出目錄插件clean-webpack-plugin
• 自動生成使用bundle.js的HTML插件html-webpack-plugin
• 拷貝文件到其他路徑下clean-webpack-plugin

自動更新打包數(shù)據(jù)

• 運行webpack --watch 監(jiān)控包變化
• 可以利用browser-sync監(jiān)控瀏覽器變化 browser-sync dist --files "**/*"

webpack Dev Server

• 集成自動編譯和自動刷新瀏覽器等功能
• 支持配置代理

source Map

• 解決調(diào)錯
• eval-是否使用eval執(zhí)行代碼
• cheao-Source Map 是否包含行信息
• module-是否能夠得到Loader處理之前的源代碼
• 在開發(fā)環(huán)境下選擇cheap-module-eval-source-map
• 生產(chǎn)模式下選擇none或者nosources-source-map

webpack HMR

• 應(yīng)用運行過程中實時替換某個模塊，應(yīng)用狀態(tài)不受改變
• HMR是webpack中最強大的功能之一
• 極大程度提高開發(fā)者效率

開啟HMR

• 安裝webpack-dev-server模塊
• 運行webpack-dev-server --hot

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  //引入模塊
  const webpack = require('webpack')
  module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
      filename: 'js/bundle.js'
    },
    devtool: 'source-map',
    // 打開熱更新
    devServer: {
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: 'file-loader'
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack Tutorial',
        template: './src/index.html'
      }),
      //配置HMR
      new webpack.HotModuleReplacementPlugin()
    ]
  }
  

HMR APIs

• 處理js熱替換的方法
• 處理圖片熱替換的方法

  // HMR 手動處理模塊熱更新
  // 不用擔(dān)心這些代碼在生產(chǎn)環(huán)境冗余的問題，因為通過 webpack 打包后，
  // 這些代碼全部會被移除，這些只是開發(fā)階段用到
  if (module.hot) {
    let hotEditor = editor
    module.hot.accept('./editor.js', () => {
      // 當 editor.js 更新，自動執(zhí)行此函數(shù)
      // 臨時記錄編輯器內(nèi)容
      const value = hotEditor.innerHTML
      // 移除更新前的元素
      document.body.removeChild(hotEditor)
      // 創(chuàng)建新的編輯器
      // 此時 createEditor 已經(jīng)是更新過后的函數(shù)了
      hotEditor = createEditor()
      // 還原編輯器內(nèi)容
      hotEditor.innerHTML = value
      // 追加到頁面
      document.body.appendChild(hotEditor)
    })
    module.hot.accept('./better.png', () => {
      // 當 better.png 更新后執(zhí)行
      // 重寫設(shè)置 src 會觸發(fā)圖片元素重新加載，從而局部更新圖片
      img.src = background
    })
    // style-loader 內(nèi)部自動處理更新樣式，所以不需要手動處理樣式模塊
  }
  

webpack DefinePlugin

• 替換路徑

tree-shaking

• 去除多余的代碼
• 生產(chǎn)模式下自動啟用