webpack4的配置你都掌握了麼？

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

一、安裝依賴

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

二、配置webpack.config.js設置loader

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

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

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

解析React:JSX

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

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

二、配置解析React的presets

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

解析CSS和Less

css-loader：用於加載.css文件並轉換成commonjs對象。
style-loader：將樣式經過style標籤插入到head中。

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

npm i style-loader css-loader -D

二、webpack配置項添加loader配置，其中因爲loader的執行順序是從右 向左執行，因此會先進行css的樣式解析後執行style標籤的插入。

 

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

三、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添加的方式開啓監聽模式，該方式源碼變化時須要每次手動刷新瀏覽器：

一、webpack配置設置

 

module.export = { watch: true }

二、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插件一塊兒使用。

一、安裝依賴webpack-dev-server並配置啓動項

npm i webpack-dev-server -D

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

 

二、配置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文件，並添加文件指紋。

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

npm i mini-css-extract-plugin -D

二、配置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

一、安裝optimize-css-assets-webpack-plugin和預處理器cssnano

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

二、配置webpack

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

html文件壓縮：html-webpack-plugin

一、安裝html-webpack-plugin插件

npm i html-webpack-plugin -D

二、配置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

推薦

後續文章優先更新於GitHub和公衆號上，歡迎你們star和關注提早獲取最新文章，感謝~

GitHub：https://github.com/PCAaron/PCAaron.github.io

公衆號：前端美食匯，亦可直接掃文末二維碼直接關注

webpack學習流程

webpack簡介

• 構建發展史

基礎篇：webpack的基本用法

• webpack的基本用法
• webpack的進階用法

進階篇：webpack的構建優化

• 編寫可維護的webpack構建配置
• webpack構建速度和體積優化

原理篇：webpack的打包原理

 

推薦閱讀

Babel:https://babeljs.io/docs/en/

webpack-dev-middleware:https://github.com/webpack/webpack-dev-middleware

webpack熱更新原理:http://www.javashuo.com/article/p-cvazksea-cu.html