核心概念

entry、output剪芍、loader傲醉、plugins碱妆、mode

entry

entry含義：用來指定打包的入口

entry用法：

單入口 => 應用:單頁應用
多入口 => 應用：單頁應用

output

output用來告訴webpack如何將編譯后的文件輸入到磁盤裙盾。

應用：單/多入口配置

單入口配置

'use strict';

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'), // 文件夾
    filename: '[name].js' // 文件
  },
  mode: 'production'
}

多入口配置

'use strict';

const path = require('path');

module.exports = {
  entry: {  // entry采用鍵值對形式
    index: './src/index.js',
    search: './src/search.js'
  },
  output: { // output采用占位符
    path: path.join(__dirname, 'dist'),
    filename: '[name].js' //  [] 占位符
  },
  mode: 'production'
}

loader

webpack開箱即用士葫，只支持Js和json兩種文件類型,通過loader去支持其他文件類型并把它們轉成有效的模塊狸页，并且可以添加到依賴圖中路捧。

loader可以理解為轉換文件類型。

本身是一個函數(shù)丑罪，接受源文件作為參數(shù)荚板，返回轉換的結果。

常見的loader有哪些吩屹？

名稱	作用
babel-loader	轉換ES6跪另、ES7等新特性語法
css-loader	支持.css文件的加載和解析
less-loader	將less轉換成css
ts-loader	將ts轉換成js
file-loader	進行圖片、字體等的打包
raw-loader	將文件以字符串的形式導入
thread-loader	多進程打包js和css,加快打包速度

寫法：

plugins

插件用于bundle文件的優(yōu)化煤搜，資源管理和環(huán)境變量注入免绿。可以理解為loader無法做到的事情都是給plugins去完成宅楞。

作用于整個構建過程针姿。包括構建前，構建中厌衙，構建后距淫。

常用的plugins有哪些？

名稱	作用
CommonsChunkPlugin	將chunks相同的模塊代碼提取成公共js
CleanWebpackPlugin	清理構建目錄
ExtractTextWebpackPlugin	將css從bundle文件里提取成一個獨立的Css文件
CopyWebpackPlugin	將文件或者文件夾拷貝到構建的輸出目錄
HtmlWebpackPlugin	創(chuàng)建html文件去承載輸出的bundle
UglifyjsWebpackPlugin	壓縮js
ZipWebpackPlugin	將打包的資源壓縮成zip包

mode

mode用來指定當前的構建環(huán)境是：production婶希、development榕暇、none

設置mode可以使用webpack的內置函數(shù)，默認值為production喻杈。

注意：mode是webpack4才有的概念彤枢。

mode的內置函數(shù)：

選項	描述
development	設置procee.env.NODE_ENV值為development.開啟NameChunkPlugin和NameModulesPlugin
production	設置procee.env.NODE_ENV值為production.開啟FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurenceOrderPlugin, SideEffectsFlagPlugins和TerserPlugin.
none	不開啟任何優(yōu)化選項

資源解析

解析ES6、解析CSS筒饰、解析圖片和字體

解析ES6

babel-loader + babel配置

babel官網(wǎng)API文檔

// npm安裝 babel-core缴啡、 babel-preset-env 、babel-loader
npm i @babel/core @babel/preset-env babel-loader -D --save

// 設置.babelrc配置
{\
  "presets": [
    "@babel/preset-env"
  ]
}

// webpack.config.js 增加babel-loader配置
 module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'
      }
    ]
  }

解析CSS

css-loader 用于加載.css文件瓷们，并且轉換成commonjs對象业栅。

style-loader 將樣式通過<style>標簽插入到head中。

// 安裝npm
npm i style-loader css-loader --save-dev

// webpack.config.js的配置
module: {
    rules: [
      {
        test: /\.css$/,
        use: [ // 注意順序
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

注意：loader的調用順序是從右往左調用谬晕，先調用css-loader,再調用style-loader

less

less-loader用于將less轉換成css

// npm
npm i less less-loader --save-dev

// webpack.config.js配置
module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]

解析圖片和字體

file-loader 解析文件

// webpack.config.js配置
 {
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [
      'file-loader'
    ]
}

url-loader 也可以處理圖片和字體碘裕，除此之外，還可以對小圖片和小字體進行base64的轉換攒钳。

// webpack.config.js配置
{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240  // 限制10K以下的圖片轉為base64
            }
          }
        ]
      }

webpack的文件監(jiān)聽

文件監(jiān)聽是在源碼發(fā)生變化時帮孔，自動重新構建出新的輸出文件。

webpack開啟文件監(jiān)聽有兩種方式：

啟動webpack命令不撑，帶上--watch參數(shù)


// package.json添加命令
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
}

在配置webpack.config.js的時候文兢，設置watch: true

文件監(jiān)聽的原理分析

輪詢判斷文件最后編輯時間是否變化

某個文件發(fā)生了變化，并不會立刻告訴監(jiān)聽者燎孟，而是先緩存起來禽作，等待aggregateTimeout

// webpack.config.js
module.export = {
    // 默認false, 也就是不開啟
    watch: true,
    // 只有開啟監(jiān)聽模式時，watchOptions才有意義
    watchOptions:{
        // 默認為空揩页，不監(jiān)聽的文件或者文件夾旷偿，支持正則匹配.
        // 忽略node_modules，可提高監(jiān)聽性能爆侣。
        ignored: /node_modules/,
        // 監(jiān)聽到變化后會等待300ms執(zhí)行萍程，默認300ms
        aggregateTimeout: 300,
        // 判斷文件是否發(fā)生變化是通過不停詢問系統(tǒng)指定文件有沒有變化實現(xiàn)的，默認每秒問1000次
        poll: 1000
    }
}

以上兩種方式的文件監(jiān)聽兔仰，唯一缺陷：每次需要手動刷新瀏覽器茫负。

熱更新

使用HotModuleReplacementPlugin插件

WDS不刷新瀏覽器、WDS不輸出文件而是放在內存中乎赴。

// webpack.config.js
mode: 'development', // 只有開發(fā)環(huán)境才可以用熱更新
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
devServer: {
    contentBase: './dist',
    hot: true
}

// pack.json
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open" // 添加WDS命令
}

使用webpack-dev-middleware

WDM將webpack的文件傳輸給服務器

適用于靈活的定制場景

原理解析: 請參考視頻中的概念和流程圖忍法。

最主要是HMR server和HMR的runTime

文件指紋

文件指紋是指打包后輸出的文件的后綴潮尝。好處是用于文件的版本管理以及緩存文件。

chunkHash: 用于js文件

// webpack.config.js
output: {
    path: path.join(__dirname, 'dist'), // 文件夾
    // js的文件指紋設置
    filename: '[name]_[chunkhash:8].js' // 文件
}

contentHash: 用于css文件

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    })
]

注意：style-loader是將css放入到header里面饿序，而MiniCssExtractPlugin是將css提取出來勉失，兩者會有沖突，只能選擇一個原探。

file-loader的name：圖片的文件指紋設置

// webpack.config.js 的 loader設置
{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          // 設置圖片的文件指紋
          name: '[name]_[hash:8].[ext]'
        }
      }
    ]
}

代碼壓縮

html壓縮

修改html-webpack-plugin的乱凿，設置壓縮參數(shù)。

css壓縮

使用optimize-css-assets-webpack-plugin進行壓縮咽弦，同時用cssnano進行匹配徒蟆。

js壓縮

webpack4.0內置了uglifyjs-webpack-plugin的壓縮，不需要手動設置型型。不過可以自行配置參數(shù)啟動并行壓縮段审。

Webpack之基礎篇