手把手教你從零認識webpack4.0

時間 2019-11-24

標籤手把手認識 webpack4.0 webpack 简体版

原文原文鏈接

前言：做爲一個現代javascript 應用程序的靜態模塊打包器，webpack能將各類資源，如js，css，圖片等做爲模塊來處理，是當下前端工程化的一個很受歡迎的工具，webpack目前最新的版本是4.0，文章將在4.0 的基礎上，從使用者的角度，一步步教你認識並搭建一個簡單的webpack配置項目，固然webpack的配置和使用較爲豐富且複雜，更多的內容須要參考webpack官網javascript

1. 兩個基本的依賴：

首先webpack 項目的兩個核心基礎模塊是webpack 和webpack-cli，這是webpack項目構建的前提css

npm install --save-dev webpack webpack-cli
複製代碼

2. 運行webpack

默認狀況下，webpack 運行構建指令默認以項目文件夾下的 src/index.js 做爲入口文件，運行 webpack指令會執行默認的webpack 配置文件。html

而在通常狀況下，須要構建符合項目要求的配置文件，可在package.json 中同過--config配置webpack的執行文件(以下)前端

"script":
    {
        "build": "webpack --config ./config/webpack.base.js"
    }
複製代碼

3. webpack 配置文件的設置

經過指定配置文件後，接下來的工做是根據須要配置執行的配置文件vue

// webpack.base.js

module.exports = {
    
}
複製代碼

3.1 入口文件

指定項目的入口文件html5

module.exports = {
    entry: "./****", // 指定入口文件
}
複製代碼

3.1 出口文件

module.exports = {
    entry: "./****", // 指定入口文件
    output: {
        path: path.resolve(__dirname, ....),// 輸出路徑，通常爲絕對路徑
        filename: '****', // 輸出文件名  [hash]能夠用來每次以hash值的區別生成文件
        publicPath: 'static', //輸出解析文件的目錄，url 相對於 HTML 頁面
    },
    chunkFilename: '***'
}
複製代碼

注意:java

// publicPath 的解釋
好比 publicPath  設置爲static 以後，html 頁面中引用的url 會自動加上static

<!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>test</title>
</head>
<body>
<script type="text/javascript" src="static/bundle.67c249f5bcf3681ab97e.js"></script></body>
</html>
複製代碼

tips: 如何理解chunkFileName: chunkname 是未被列入entry 中，卻有須要被打包出來的文件命名配置，例如，某些公共模塊須要單獨的抽離出來，這些公共模塊就能夠用chunkname 來命名能夠見下面的代碼分離部分node

3.2 配置多個入口文件

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 寫入到硬盤：./dist/app.js, ./dist/search.js
複製代碼

3.3 clean-webpack-plugin

不斷運行 webpack 的指令，每次都會生成不一樣的不一樣hash 值的js 腳本，所以，咱們須要一個插件，每次構建項目以前，將原先的構建完成的文件夾刪除，首選 clean-webpack-plugin 的插件配置相關以下react

const CleanWebpackPlugin = require('clean-webpack-plugin');

 module.exports = {
     plugins: [
        new CleanWebpackPlugin(['dist'], {
            {
                root: '', // 刪除文件夾的根路徑
                verbose: true, // 是否打開日誌
            }
        }) //  第一個參數爲刪除的文件夾數組
     ]
     
 }
複製代碼

相關參數配置clean-webpack-pluginwebpack

3.4 html-webpack-plugin

webpack 構建項目時，經過指定的入口文件，會將全部的js css 等以依賴模塊的形式打包成一個或多個的腳本文件，一般狀況下，腳本文件會附屬於html 文件運行，這時候須要將打包好的腳本文件，注入到html 中， html-webpack-plugin 插件的目的是，以一個html 爲模板，將打包好的腳本注入到模板中，相關的配置以下

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

new HtmlWebpackPlugin()  // 不帶任何配置時， 默認會以一個內置普通的html 做爲模板html

new HtmlWebpackPlugin({
    title: 'title', // 給模板中的html 注入標題， 須要在模板的html 中指明配置， <%= htmlWebpackPlugin.options.title %>
    filename: '', // 指定轉換後的html 文件名
    template: './',// 模板文件的路徑
    chunk: ['main']// chunk 指定了該模板導入的模塊，在多頁面的配置中，能夠在該屬性中配置多個入口中的一個或者多個腳本文件
})
複製代碼

4. mode 模式

所謂模式，webpack4.0默認的模式是 'production',能夠經過 mode 來更改模式爲'development'

module.exports = {
    mode: 'development' // 會將  process.env.NODE_ENV === 'development'
    mode: 'production' // 會將 process.env.NODE_ENV === 'production'
}
複製代碼

5.1 生產配置/ 開發配置

生產模式下的要求：注重模塊的大小
開發模式下的要求：調試，熱更新

在生產環境中，默認會進行腳本的壓縮。

在開發環境中，咱們須要快速的調試代碼，所以須要有一個本地的服務器環境，用於訪問 webpack 構建好的靜態文件，webpack-dev-server 是 webpack 官方提供的一個工具，能夠基於當前的 webpack 構建配置快速啓動一個靜態服務。當 mode 爲 development 時，會具有 hot reload 的功能，即當源碼文件變化時，會即時更新當前頁面，以便你看到最新的效果。

根據須要，須要將配置文件抽離成生產配置和開發配置，並留一個共同的配置文件

使用 webpack-merge 來合併對象

npm i --save-dev webpack-dev-server
複製代碼

// package.json
{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
     "dev": "webpack-dev-server --open", // webpack-dev-server 啓動
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
  }
複製代碼

webpack.dev.js
    
    const merge = require('webpack-merge')
    
    module.exports = merge(base, {
        devtool: "cheap-module-eval-source-map"  
        devServer: {
            port: 8088,
            compress: true,
            ...
        }
    })
    
    
複製代碼

講講webpack-dev-server 的配置，webpack-dev-server 的配置比較多，具體能夠參考webpack-dev-server官方文檔

常見的配置：

public：指定靜態服務的域名，當你使用 Nginx 來作反向代理時，應該就須要使用該配置來指定 Nginx 配置使用的服務域名
port ：指定端口號
openPage：指定初次訪問的頁面
publicPath：指定構建好的靜態文件在瀏覽器中用什麼路徑去訪問，默認是 /，好比設爲 static 時，默認訪問靜態的路徑變成 http://localhost:8080/static/bundle.js
proxy 用於配置 webpack-dev-server 將特定 URL 的請求代理到另一臺服務器上。當你有單獨的後端開發服務器用於請求 API 時，這個配置至關有用

proxy: {
  '/api': {
    target: "http://localhost:3000", // 將 URL 中帶有 /api 的請求代理到本地的 3000 端口的服務上
    pathRewrite: { '^/api': '' }, // 把 URL 中 path 部分的 `api` 移除掉
  },
}...

複製代碼

devtool 的各類模式會有另外一篇文章進行講解，敬請期待。。。

6. loader

webpack 中提供一種處理多種文件格式的機制，即是使用 loader。咱們能夠把 loader 理解爲是一個轉換器，負責把某種文件格式的內容轉換成 webpack 能夠支持打包的模塊。

舉個例子，在沒有添加額外插件的狀況下，webpack 會默認把全部依賴打包成 js 文件，若是入口文件依賴一個 .hbs 的模板文件以及一個 .css 的樣式文件，那麼咱們須要 handlebars-loader 來處理 .hbs 文件，須要 css-loader 來處理 .css 文件（這裏其實還須要 style-loader，後續詳解），最終把不一樣格式的文件都解析成 js 代碼，以便打包後在瀏覽器中運行。...

6.1 css-loader

css-loader 負責解析 CSS 代碼，主要是爲了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明

6.2 style-loader

style-loader 會將 css-loader 解析的結果轉變成 JS 代碼，運行時動態插入 style 標籤來讓 CSS 代碼生效。

6.3 file-loader

file-loader 用來處理jpg/png/gif 等文件格式

6.4 sass-loader node-sass

這兩個loader 用於解析scss 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                  process.env.NODE ? 'style-loader' : MiniCssExtractPlugin.loader,
                  'css-loader',
                  'sass-loader'
                ]
          }
        ]
    }
}
複製代碼

6.5 babel 相關

爲何要使用babel，目前低版本的部分瀏覽器，並不支持es6的相關語法，babel 的目的就是爲了講es6 的相關語法，轉換成es5 的語法

npm install -D babel-loader @babel/core @babel/preset-env
複製代碼

webpack 4中須要安裝這三個loader 配置以下：

module.exports = {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
            }
        }
      }
    ]
}

複製代碼

babel的三個loader 能夠解決箭頭函數這類es6 語法，可是沒法解決promise， symbol 這類新增的內建對象，所以須要引入 babel-polyfill來進行全局的轉換

ps： babel-polyfill 須要放在生產依賴中，即npm i --save babel-polyfill 而且須要配置 entry

module.exports = {
  entry: ['babel-polyfill', './src/main.js'],
  ···
}
複製代碼

使用前

main.f66bf9d8d1fd5b0f62ae.css   88 bytes       0  [emitted]  main
bundle.f66bf9d8d1fd5b0f62ae.js   66.6 KiB       0  [emitted]  main
main.f66bf9d8d1fd5b0f62ae.css.map  194 bytes       0  [emitted]  main
bundle.f66bf9d8d1fd5b0f62ae.js.map    219 KiB       0  [emitted]  main
複製代碼

使用後

main.0c090c129f1d9d4804b0.css   88 bytes       0  [emitted]  main
bundle.0c090c129f1d9d4804b0.js    154 KiB       0  [emitted]  main
main.0c090c129f1d9d4804b0.css.map  194 bytes       0  [emitted]  main
bundle.0c090c129f1d9d4804b0.js.map    219 KiB       0  [emitted]  main
複製代碼

tips: 能夠很明顯的發現，打包後的bundle會比以前要大大概100k 左右，緣由是， babel-polyfill 會對全局進行改寫，這樣其實壞處是污染了全局的環境，而且增長了打包後的文件大小,這也是要進行安裝在dependency 而不是 devDependency的緣由

所以， webpack4.0 提供了另外的 plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime


{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
複製代碼

7.其餘plugin

在 webpack 的構建流程中，plugin 用於處理更多其餘的一些構建任務。能夠這麼理解，模塊代碼轉換的工做由 loader 來處理，除此以外的其餘任何工做均可以交由 plugin 來完成

7.1 uglifyjs-webpack-plugin

uglifyjs-webpack-plugin 是用來對js 代碼進行壓縮體積用的，在webpack4.0中，默認的配置是進行壓縮，能夠經過 mode 模式的 development 來設置成不進行壓縮，默認模式是production

其餘的默認配置能夠參考： uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
}
複製代碼

7.2 DefinePlugin

DefinePlugin 是 webpack 內置的插件，可使用 webpack.DefinePlugin 直接獲取。這個插件用於建立一些在編譯時能夠配置的全局常量，這些常量的值咱們能夠在 webpack 的配置中去指定，例如：

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true), // const PRODUCTION = true
      VERSION: JSON.stringify('5fa3b9'), // const VERSION = '5fa3b9'
      BROWSER_SUPPORTS_HTML5: true, // const BROWSER_SUPPORTS_HTML5 = 'true'
      TWO: '1+1', // const TWO = 1 + 1,
      CONSTANTS: {
        APP_VERSION: JSON.stringify('1.1.2') // const CONSTANTS = { APP_VERSION: '1.1.2' }
      }
    }),
  ],
}...

複製代碼

有了上面的配置，就能夠在應用代碼文件中，訪問配置好的變量了，如：

console.log("Running App version " + VERSION);

if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
複製代碼

7.3 copy-webpack-plugin

這個插件看名字就知道它有什麼做用，沒錯，就是用來複制文件的。

咱們通常會把開發的全部源碼和資源文件放在 src/ 目錄下，構建的時候產出一個 build/ 目錄，一般會直接拿 build 中的全部文件來發布。有些文件沒通過 webpack 處理，可是咱們但願它們也能出如今 build 目錄下，這時就可使用 CopyWebpackPlugin 來處理了。

咱們來看下如何配置這個插件：...

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

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/file.txt', to: 'build/file.txt', }, // 顧名思義，from 配置來源，to 配置目標路徑
      { from: 'src/*.ico', to: 'build/*.ico' }, // 配置項可使用 glob
      // 能夠配置不少項複製規則
    ]),
  ],
}...

複製代碼

7.4 extract-text-webpack-plugin

extract-text-webpack-plugin 是在webpack4.0 以前用來把依賴的css 分離出來成爲單獨的文件，可讓腳本文件變得更小， webpack 4.0 再也不使用extra-text-webpack-plugin來分離css 轉而使用mini-css-extract-plugin

7.5 mini-css-extract-plugin

mini-css-extract-plugin 既須要配置plugin 也須要配置loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    plugins: [
		new MiniCssExtractPlugin({
			// Options similar to the same options in webpackOptions.output
			// both options are optional
			filename: "[name].[contenthash].css",
			chunkFilename: "[id].css"
		})
	],
	module: {
		rules: [{
			test: /\.(css|scss)$/,
			include: [path.resolve(__dirname, '../src')],
			use: [
				MiniCssExtractPlugin.loader,
				'css-loader'
			]
		}, ]
	}
}
複製代碼

tips: 這個插件通常在生產環境中使用，而且使用時不能使用style-loader== ps: contenthash 和 hash 的區別見第八部分

7.5 IgnorePlugin

IgnorePlugin 和 ProvidePlugin 同樣，也是一個 webpack 內置的插件，能夠直接使用 webpack.IgnorePlugin 來獲取。

這個插件用於忽略某些特定的模塊，讓 webpack 不把這些指定的模塊打包進去。例如咱們使用 moment.js，直接引用後，裏邊有大量的 i18n 的代碼，致使最後打包出來的文件比較大，而實際場景並不須要這些 i18n 的代碼，這時咱們可使用 IgnorePlugin 來忽略掉這些代碼文件，配置以下：...

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}
複製代碼

IgnorePlugin 配置的參數有兩個，第一個是匹配引入模塊路徑的正則表達式，第二個是匹配模塊的對應上下文，即所在目錄名。

8 分離代碼文件

爲了實現減少打包後代碼的體積，利用緩存來加速靜態資源訪問，須要將不一樣，且相互不影響的代碼塊分離出來，在plugin 中介紹過mini-css-extract-plugin 來對css 文件進行分離，除此以外，還建議公共使用的第三方類庫顯式地配置爲公共的部分，由於第三方庫在實際開發中，改變的頻率比較小，能夠避免因公共 chunk 的頻繁變動而致使緩存失效。

module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方類庫
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口做爲公共部分
          enforce: true,
        },
      },
    },
  },
  // ... 其餘配置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 來作路徑匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路徑在 node_modules 目錄下的都做爲公共部分
          name: "vendor", // 使用 vendor 入口做爲公共部分
          enforce: true,
        },
      },
    },
  },
}...

複製代碼

ps：在次基礎上，須要在配置的output 中設置 chunkFilename 來配置打包後這些第三方庫的名字

module.exports = {
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.[hash].js',
        chunkFilename: 'vendor.[chunkhash].js'
    },
}
複製代碼

ps: hash 和 chunkhash, contenthash 的區別==

hash 在每次構建的時候都會從新所有生成，全部的文件的hash 都是同一個值，不管是否修改了文件，全部的文件都將從新生成，起不到緩存的效果； chunkhash根據不一樣的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的哈希值,好比咱們將一些公共模塊，或者第三方依賴包獨立開來，接着用chunkhash 生成哈希值，只要不改變公共代碼，就不須要從新構建；然而當chunkhash 用在css 中時，因爲css 和js 用了同一個chunkhash，因此當只改變js 時，css 文件也會從新生成，因此css 中咱們使用contenthash==

9 其餘一些經常使用配置

resolve

resolve.alias

配置經常使用模塊的相對路徑

module.exports = {
  //...
  resolve: {
    alias: {
      Util: path.resolve(__dirname, 'src/util/'),
    }
  }
};

實際引用中
imoprt uitl from 'Util/sss'
原始：
import util from './src/util/sss'

複製代碼

resolve.extensions

這個配置能夠定義在進行模塊路徑解析時，webpack 會嘗試幫你補全那些後綴名來進行查找

resolve: {
    extensions: [".js", ".vue"],
  },
複製代碼

相關標籤/搜索

每日一句

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