當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack4配置基础

發布時間：2023/12/13 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack4配置基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

為什么要使用構建工具？

1.轉換ES6語法（很多老版本的瀏覽器不支持新語法） 2.轉換JSX? 3.CSS前綴補全/預處理器? 4.壓縮混淆（將代碼邏輯盡可能地隱藏起來）? 5.圖片壓縮? 6.?....

為什么選擇webpack？

社區生態豐富

配置靈活、插件化擴展

官方更新迭代速度快

基礎概念

默認的配置文件是weback.config.js，在package.json中配置腳本可以通過webpack --config來指定構建使用的配置文件。

初始化

創建并進入新的目錄，執行如下命令，初始化package.json文件，這是一個模塊的描述文件，-y的意思是所有配置都是yes

npm init -y

安裝webpack

npm install webpack webpack-cli --save-dev

核心概念

先看一下一份最簡單的webpack配置是什么樣的

const path = require('path');module.exports = {entry: './src/index.js', // 打包的入口文件output: { // 打包后的輸出filename: "bundle.js",path: path.join(__dirname, "/dist")},mode: 'development', // 所處環境module: {rules: [{test: /\.js$/,use: "babel-loader"},......]},plugins: [new HtmlWebpackPlugin(),] };

entry

打包的入口文件?

單入口：

entry: "./src/index.js"

多入口（適用于多頁面場景）：

entry: {app: "./src/app.js",adminApp: "./src/adminApp.js", }

output

打包之后的輸出

單輸出：

output: {filename: "bundle.js",path: __dirname + "/dist" }

多輸出：

output: {filename: "[name].js", // 占位符[name]代表entry中的keypath: __dirname + "/dist" }

Loaders

webpack只支持JS和JSON兩種文件類型，要想支持其他文件類型且轉化成有效的模塊，需要通過Loaders。Loaders本身是一個函數，接收源文件做參數，返回轉換的結果。

常見的Loaders

babel-loader 轉換ES6/ES7等語法 css-loader 支持.css文件的加載和解析 less-loader 將less文件轉換成css ts-loader 將TS轉換成js file-loader 將圖片、字體等的打包 raw-loader 將文件以字符串的形式導入 thread-loader 多線程打包JS和CSS

Plugins

插件用于打包文件的優化，資源管理和環境變量注入，作用于整個構建過程。也可以理解為Loaders無法完成的事情都可以用Plugins完成。

常見的Plugins：

CommonsChunkPlugin 常用于多頁面打包情況下，將多個頁面公用的js代碼塊提取成公共js CleanWebpackPlugin 清理構建目錄 ExtractTextWebpackPlugin 將CSS從bundle文件里提取成一個獨立的CSS文件 CopyWebpackPlugin 將文件或文件夾拷貝到夠賤的輸出目錄 HtmlWebpackPlugin 創建html文件去承載輸出的bundle。這個非常有用，不需要我們手動去創建html文件 UglifyjsWebpackPlugin 壓縮JS ZipWebpackPlugin 將打包的資源生成一個zip包

mode

用來指定當前的構建環境，值有 production 、development 、none，默認是production。通過mode可以使用webpack內置的函數和功能：

developement

開啟 NamedChunksPlugin 和 NamedModulesPlugin 在代碼熱更新階段，打印哪個模塊發生了更新

production

開啟 FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin，OccurrenceOrderPlugin , SideEffectsFlagPlugin 和 TerserPlugin

none

不開啟任何優化

webpack基礎功能

解析ES6

使用babel-loader, babel的配置文件是.babelrc, 增加ES6的babel preset配置

1.安裝包

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

2.創建.babelrc文件，并添加配置

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

3.webpack.config.js配置

module: {rules: [{test: /\.js$/,use: "babel-loader", // 用來解析ES6},] },

解析JSX

增加babel preset配置：

"@babel/preset-react"

要在React中使用箭頭函數，需要安裝插件

npm i @babel/plugin-proposal-class-properties // .babelrc "plugins": ["@babel/plugin-proposal-class-properties" ]

解析CSS/CSS預處理/前綴補全

less-loader 將less轉化成css css-loader 讓webpack解析css文件，并轉換成commonjs對象，插入到JS里（因為webpack本身只支持js和json） style-loader 將樣式通過<style>標簽插入到<head>中

CSS前綴常見的有：?-ms -moz -webkit -o 需要安裝autoprefixer 和 postcss-loader

npm i autoprefixer postcss-loader

配置：

{test: /\.less$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {plugins: () => [require('autoprefixer')({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] // 指定所需要兼容瀏覽器的版本})]}},"less-loader",] }, 執行順序：less-loader -> postcss-loader -> css-loader -> style-loader

解析圖片、字體

file-loader 用于處理文件

?js文件中：

import logo from './images/geektime.png' const MyComponent = () => {retrun <img alt="" src={logo} /> }

webpack.config.js配置：

{test: /.(png|jpg|gif|jpeg)$/i,use: {loader: "file-loader",options: {name: '[name][hash:8].[ext]' // 重命名打包后的文件}} }

很多時候，前端的圖片請求路徑需要從后端接口獲取，不適用此場景。另外，即使不從后端獲取，靜態資源也可以用傳統的相對路徑引用，此時存在一個問題，就是打包后的文件夾，與打包前源文件位置不同，相對靜態文件的相對路徑也不同，造成打包后路徑失效，無法引入的情況。我們需要將靜態文件夾整體復制到打包后的文件目錄內，手工做太麻煩，可以借助插件實現。

npm i copy-webpack-plugin

?webpack.config.js配置：

const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [new CopyWebpackPlugin([{from: './src/static',to: __dirname + './dist/static'}]) ]

資源解析

url-loader 也可以處理圖片和字體，可以設置較小資源自動 base64。

webpack.config.js配置：

{test: /\.(png|svg|jpg|gif)$/,use: [{loader: "url-loader",options: {limit: 1024*5, // 當文件小于1024*n字節，webpack將該資源自動轉化成base64編碼在js文件中}}] }

文件監聽

文件監聽指在發現源代碼發生變化時，自動重新構建出新的輸出文件。需要手動刷新瀏覽器。

webpack開啟監聽模式有兩種方式：

命令打包時帶上 --watch參數（可以在package.json中配置腳本）
配置webpack.config.js中設置 watch: true

webapck配置：

watch: true, watchOptions: {ignored: /node_modules/, // 不監聽的文件或文件夾，默認為空。正則匹配/字符串都可aggregateTimeout: 300, // 監聽到變化發生后，延遲300ms再去執行，默認300mspoll: 1000 // 輪詢頻率，默認每秒1000次 },

監聽原理：輪詢判斷文件的最后編輯時間是否發生變化。某個文件發生了變化，并不會立即告訴監聽者，而是先緩存起來，等aggregateTimeout時間過后再構建。

熱更新

需要安裝webpack-dev-server，適用于開發環境，不輸出文件，將構建后的內容保存在內存中。

在package.json中編寫腳本：

"dev": "webpack-dev-server --open" // open指自動打開瀏覽器

webpack配置：

devServer: {contentBase: './dist', // 必需port: 8080, // 默認8080hot: true // 默認true },

當然，如果使用html-webpack-plugin，則不需要contentBase屬性。

文件指紋策略

作用：

做版本管理。當文件發生修改時，只需要更新發生變化的文件

瀏覽器緩存。文件名發生變化時，瀏覽器會重新請求該文件，而其它未改變的文件則直接從緩存中拿就行。

三種hash：

Hash：和整個項目的構建相關，只要項目文件有修改，整個項目構建的hash值就會改變
Chunkhash：和webpack打包的chunk有關，不同的entry會生成不同的chunkhash值，只能在生產環境中使用
Contenthash：根據文本內容來定義hash，文件內容不變，則contenthash不變

使用：

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

CSS由于style-loader的存在，被內聯在html中，可以用插件將其獨立出一個css文件。

npm install mini-css-extract-pluginconst MiniCssExtractPlugin = require('mini-css-extract-plugin'); plugins: [new MiniCssExtractPlugin({ // 該插件會將css提取出來并在html中引入獨立的文件，與style-loader互斥filename: '[name][contenthash:8].css'}); ]

JS文件只能使用hash和ChunkHash，CSS建議使用ContentHash

占位符： [ext] 后綴名 [name] 文件名稱 [path] 文件的相對路徑 [folder] 文件所在的文件夾 [contenthash] 文件的內容hash，默認是md5生成 [hash] 文件內容的hash，默認md5生成（注意這里的hash與前面的"hash"意義不一樣） [emoji] 一個隨機的只帶文件內容的emoji

文件壓縮

主要是HTML、CSS、JS的壓縮

JS壓縮：

　　webpack內置了uglifyjs-webpack-plugin，在生產環境自動實現了JS壓縮

CSS壓縮：

　　使用optimize-css-assets-webpack-plugin 和 cssnano可以實現對CSS文件進行壓縮，因為style-loader將CSS內聯在html中，需要借助 mini-css-extract-plugin 插件將CSS分離成文件。

HTML壓縮：

　　html-webpack-plugin設置壓縮參數minify，可以將空格、換行和注釋干掉

npm install html-webpack-plugin optimize-css-assets-webpack-plugin cssnano mini-css-extract-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 一個頁面對應一個 html-webpack-plugin module: {rules: [{test: /\.less$/,use: [// "style-loader",MiniCssExtractPlugin.loader, // 與style-loader互斥"css-loader",{loader: "postcss-loader",options: {plugins: () => [require('autoprefixer')({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] // 指定所需要兼容瀏覽器的版本})]}},"less-loader",]},] }, new HtmlWebpackPlugin({template: "./src/index.html", // 模板所在路徑filename: "index.html", // 指定打包后的文件名稱// chunks: [''], // 生成的html要鏈入哪些js文件。數組值對應的是entry中的鍵// inject: true, // 將生成的css等文件自動注入到html內，默認開啟minify: {html5: true,collapseWhitespace: true, // 干掉空格preserveLineBreaks: false, // 干掉換行minifyCSS: true, // 壓縮html內的cssminifyJS: true, // 壓縮html內的jsremoveComments: true, // 刪除注釋}, }), new MiniCssExtractPlugin({filename: '[name][contenthash:8].css' }), new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'), }),

自動清理構建目錄

借助 clean-webpack-plugin 每次構建都會自動刪除之前的構建目錄。默認會刪除output指定的輸出目錄。

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); new CleanWebpackPlugin(),

轉載于:https://www.cnblogs.com/V587Chinese/p/11555241.html

總結

以上是生活随笔為你收集整理的webpack4配置基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

基础

上一篇：《原神》长篇动画项目官宣！与知名动画公司
下一篇： RESTful API概述