webpack4的配置你都掌握了麼？

阿新 • • 發佈：2020-01-08

webpack5都出了，webpack4的的基本配置，解析ES6，引入CSS，編譯Less，設定image等等，你都會了麼？

解析ES6

瞭解Babel

Babel是一個JavaScript編譯器，可以實現將ES6+轉換成瀏覽器能夠識別的程式碼。

Babel在執行編譯時，可以依賴.babelrc檔案，當設定依賴檔案時，會從專案的根目錄下讀取.babelrc的配置項，.babelrc配置檔案主要是對預設(presets)和外掛(plugins)進行配置。

其中，presets可以標識需要轉換的原始碼使用了哪些新特性，可以理解為一系列plugins的集合，例如babel-preset-es2015，可以將es6轉換為es5；而plugins則指示babel如何對程式碼進行轉換，例如plugin-transform-arrow-functions可將ES6語法轉換為 ES5。

解析ES6

1、安裝依賴

npm i @babel/core @babel/preset-env babel-loader -D

2、配置webpack.config.js設定loader

 module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }
        ]
    }

3、根目錄建立.babelrc，並配置preset-env對ES6+語法特性進行轉換

{
  "presets": [
    "@babel/preset-env"
  ]
}

解析React:JSX

1、安裝react及@babel/preset-react

npm i react react-dom @babel/preset-react -D

2、配置解析React的presets

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

解析CSS和Less

css-loader：用於載入.css檔案並轉換成commonjs物件。
style-loader：將樣式通過style標籤插入到head中。

1、安裝依賴css-loader和style-loader

npm i style-loader css-loader -D

2、webpack配置項新增loader配置，其中由於loader的執行順序是從右向左執行，所以會先進行css的樣式解析後執行style標籤的插入。

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

3、less-loader，將less轉換成css。安裝less-loader依賴並新增webpack配置

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

解析圖片和字型

file-loader

file-loader:用於處理檔案及字型。

按照file-loader依賴並配置

npm i file-loader -D

{
   test: /\.(png|svg|jpg|jpeg|gif)$/,
   use: 'file-loader'
},
{
    test:/\.(woff|woff2|eot|ttf|otf|svg)/,
    use:'file-loader'
}

url-loader

url-loader也可以處理檔案及字型，對比file-loader的優勢就是可以通過設定配置，設定小資源自動轉換為base64。

安裝url-loader依賴並配置webpack。

{
     test: /\.(png|svg|jpg|jpeg|gif)$/,
      use: [
           {
               loader:'url-loader',
               options: {
                   limit:10240
               }
           }
      ]
}

檔案監聽:watch

通過監聽原始碼的變化，自動構建出新的輸出檔案。

可通過webpack新增配置或者CLI新增的方式開啟監聽模式，該方式原始碼變化時需要每次手動重新整理瀏覽器：

1、webpack配置設定

module.export = {
    watch: true
}

2、CLI新增引數:-- watch。

除了通過watch引數的配置方式開啟監聽，亦可通過定製watch模式選項的形式watchOptions來定製監聽配置。

module.export = {
    watch: true,
    // 只有開啟了監聽模式，才有效
    watchOptions: {
        ignored: /node_modules/, //預設為空，設定不監聽的檔案或資料夾
        aggregateTimeout: 300, // 預設300ms，監聽變化後需要等待的執行時間
        poll:1000   // 預設1000ms，通過輪詢的方式詢問系統指定檔案是否發生變化
    }
}

熱更新：webpack-dev-server

熱更新基本原理

熱更新大概流程：

webpack Compiler，將JavaScript編譯成輸出的bundle檔案。
HMR Server，將熱更新的檔案輸出到HMR Runtime。
Bundle Server，通過提供伺服器的形式，提供瀏覽器對檔案的訪問。
HMR Runtime，開發打包階段時，將構建輸出檔案注入到瀏覽器，更新檔案的變化。

當啟動webpack-dev-server階段時，將原始碼在檔案系統進行編譯，通過webpack Compiler編譯器打包，並將編譯好的檔案提交給Bundle Server伺服器；Bundle Server即可以伺服器的方式供瀏覽器訪問。

當監聽到原始碼發生變化時，經過webpack Compiler的編譯後提交給 HMR Server，一般通過websocket實現監聽原始碼的變化，並通過json資料的格式通知HMR Runtime，HMR Runtime 對bundle進行改變並重新整理瀏覽器。

熱更新配置

相比於watch不能自動重新整理瀏覽器，webpack-dev-server的優勢就明顯了。webpack-dev-server構建的內容會存放在記憶體中，所以構建速度更快，並且可自動的實現瀏覽器的自動識別並作出變化。其中，webpack-dev-server 需要配合webpack內建的HotModuleReplacementPlugin外掛一起使用。

1、安裝依賴webpack-dev-server並配置啟動項

npm i webpack-dev-server -D

// package.json
"scripts": {
    "dev": "webpack-dev-server --open"
}

2、配置webpack,其中webpack-dev-server一般在開發環境中使用，所以需設定mode模式為development。

const webpack = require('webpack')
plugins: [
     new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname,'dist'),// 監聽dist資料夾下內容
        hot: true//啟動熱更新
}

更多配置項可參考：https://www.webpackjs.com/configuration/dev-server/

檔案指紋

hash：整個專案的構建相關，當有檔案修改，整個專案構建的hash值就會更新。
chunkhash：和webpack打包的chunk相關，不同的entry會生成不同的chunkhash，一般用於js的打包。
contenthash：根據檔案內容來定義hash，檔案內容不變，contenthash不變。例如css的打包，由於修改js或html檔案，但是沒有修改引入的css樣式時，檔案不需要生成新的雜湊值，所以可適用於css的打包。

備註，檔案指紋不能和熱更新一起使用。

JS檔案指紋設定:chunkhash

webpack.dev.js

module.export = {
     entry: {
           index: './src/index.js',
           search: './src/search.js'
        },
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name][chunkhash:8].js'
        },
}

CSS檔案指紋：contenthash

由於上面方式通過style標籤將CSS插入到head中並沒有生成單獨的CSS檔案，我們可以通過min-css-extract-plugin外掛將CSS提取成單獨的CSS檔案，並新增檔案指紋。

1、安裝依賴mini-css-extract-plugin

npm i mini-css-extract-plugin -D

2、配置CSS檔案指紋

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.export = {
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
        ]
    },
     plugins: [
        new MiniCssExtractPlugin({
           filename: '[name][contenthash:8].css'
        })
     ]
}

圖片檔案指紋設定：hash

其中，hash對應的是檔案內容的雜湊值，預設為md5生成，不同於前面所說的hash值。

module.export = {
    module:{
        rules: [
            {
                 test: /\.(png|svg|jpg|jpeg|gif)$/,
                 use: [{
                     loader:'file-loader',
                     options: {
                         name: 'img/[name][hash:8].[ext]'
                     }
                 }],           
            }
        ]
    }
}

程式碼壓縮

其中js壓縮，webpack4.x版本已經內建了uglifyjs-webpack-plugin實現壓縮。

CSS 檔案壓縮：optimize-css-assets-webpack-plugin

1、安裝optimize-css-assets-webpack-plugin和前處理器cssnano

npm i optimize-css-assets-webpack-plugin cssnano -D

2、配置webpack

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.export = {
    plugins: [
         new OptimizeCssAssetsPlugin({
             assetNameRegExp: /\.css$/g,
             cssProcessor: require('cssnano')
         })
    ]
}

html檔案壓縮：html-webpack-plugin

1、安裝html-webpack-plugin外掛

npm i html-webpack-plugin -D

2、配置webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
    plugins: [
         new HtmlWebpackPlugin({
             template: path.join(__dirname,'src/search.html'), // 使用模板
             filename: 'search.html',    //  打包後的檔名
             chunks: ['search'], // 打包後需要使用的chunk(檔案)
             inject: true, // 預設注入所有靜態資源
             minify: {
                  html5:true,
                  collapsableWhitespace: true,
                  preserveLineBreaks: false,
                  minifyCSS: true,
                  minifyJS: true,
                  removeComments: false
             }
         }),
    ]
}

對應的完整demo程式碼可檢視地址：https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-basic

webpack4的配置你都掌握了麼？

​解析ES6

瞭解Babel

解析ES6

解析React:JSX

解析CSS和Less

解析圖片和字型

file-loader

url-loader

檔案監聽:watch

熱更新：webpack-dev-server

熱更新基本原理

熱更新配置

檔案指紋

JS檔案指紋設定:chunkhash

CSS檔案指紋：contenthash

圖片檔案指紋設定：hash

程式碼壓縮

CSS 檔案壓縮：optimize-css-assets-webpack-plugin

html檔案壓縮：html-webpack-plugin

推薦

webpack學習流程

webpack簡介

基礎篇：webpack的基本用法

進階篇：webpack的構建優化

原理篇：webpack的打包原理

推薦閱讀

相關推薦

解析ES6