webpack 本質(zhì)上是一個打包工具，它會根據(jù)代碼的內(nèi)容解析模塊依賴，幫助我們把多個模塊的代碼打包。

一切文件：JavaScript、CSS、SCSS、圖片、模板，在 Webpack 眼中都是一個個模塊，這樣的好處是能清晰的描述出各個模塊之間的依賴關(guān)系，以方便 Webpack 對模塊進(jìn)行組合和打包。 經(jīng)過 Webpack 的處理，最終會輸出瀏覽器能使用的靜態(tài)資源。

entry

webpack 構(gòu)建的入口entry，webpack 會讀取這個文件，并從它開始解析依賴，在內(nèi)部構(gòu)件一個依賴圖，這個依賴圖會引用項目中使用到的各個模塊，然后進(jìn)行打包，生成一個或者多個 bundle 文件。

我們常見的項目中，如果是單頁面應(yīng)用，那么入口只有一個；如果是多個頁面的項目，那么通常是一個頁面會對應(yīng)一個構(gòu)建入口。

單??：entry 是?個字符串，如下代碼：

module.exports = {entry: './src/index.js'
};

上述代碼等價于：

module.exports = {entry: {main: './src/index.js'}
}

多?口：entry 是?個對象，如下代碼：

module.exports = {entry: {app: './src/app.js',home: './src/home.js'}
};

還有一種場景比較少用到，即是多個文件作為一個入口來配置，webpack 會解析多個文件的依賴然后打包到一起：

// 使用數(shù)組來對多個文件進(jìn)行打包
module.exports = {entry: {main: ['./src/foo.js','./src/bar.js']}
}

動態(tài) entry

const path = require('path');
const fs = require('fs');// src/pages 目錄為頁面入口的根目錄
const pagesRoot = path.resolve(__dirname, './src/pages');
// fs 讀取 pages 下的所有文件夾來作為入口，使用 entries 對象記錄下來
const entries = fs.readdirSync(pagesRoot).reduce((entries, page) => {// 文件夾名稱作為入口名稱，值為對應(yīng)的路徑，可以省略 `index.js`，webpack 默認(rèn)會尋找目錄下的 index.js 文件entries[page] = path.resolve(pagesRoot, page);return entries;
}, {});module.exports = {// 將 entries 對象作為入口配置entry: entries,// ...
};

output

output用來告訴 webpack 如何將編譯后的文件輸出到磁盤。webpack 構(gòu)建生成的文件名、路徑等都是可以配置的，在配置文件中使用 output 字段來進(jìn)行設(shè)置：

module.exports = {// ...output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',},
}// 或者使用 entry 的名稱
module.exports = {entry: {main: './src/index.js' // main 為 entry 的名稱},output: {filename: '[name].js', // 使用 [name] 來引用 entry 名稱，在這里即為 mainpath: path.join(__dirname, '/dist/[hash]'),// 路徑中使用 hash，每次構(gòu)建時會有一個不同 hash 值，可以用于避免發(fā)布新版本時瀏覽器緩存導(dǎo)致代碼沒有更新// 文件名中也可以使用 hash},
}

loader

我們在前端構(gòu)建中會遇見需要使用各式各樣的文件，例如 css 代碼，圖片，模板代碼等。webpack 中提供一種處理多種文件格式的機制，便是使用 loader。我們可以把 loader 理解為是一個轉(zhuǎn)換器，負(fù)責(zé)把某種文件格式的內(nèi)容轉(zhuǎn)換成 webpack 可以支持打包的模塊。例如我們需要 css-loader 來處理 .css 文件（這里其實還需要 style-loader），最終把不同格式的文件都解析成 js 代碼，以便打包后在瀏覽器中運行。

webpack 開箱即用只支持 JS 和 JSON 兩種文件類型，通過 Loaders 去支持其它文件類型并且把它們轉(zhuǎn)化成有效的模塊，并且可以添加到依賴圖中。
本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。

常見的 Loaders 有哪些？

• babel-loader：轉(zhuǎn)換ES6、ES7等JS新特性語法
• css-loader：支持.css文件的加載和解析
• less-loader：將less文件轉(zhuǎn)換成css
• ts-loader：將TS轉(zhuǎn)換成JS
• file-loader：進(jìn)行圖片、字體等的打包
• raw-loader：將文件以字符串的形式導(dǎo)入
• thread-loader：多線程打包JS和CSS

示例，處理CSS，一般要安裝style-loader、css-loader：

其中webpack4.x安裝style-loader2.x、css-loader3.x:

npm i css-loader@3 style-loader@2 -D

如果要使用babel-loader，使用webpack4.x，要安裝npm install babel-loader@8 @babel/core @babel/preset-env

babel的一系列工具鏈說明：

• @babel/core：babel核心包,babel-loader的核心依賴。
• @babel/preset-env：ES語法分析包。

注：es6到es5的語法轉(zhuǎn)換是以插件的形式實現(xiàn)的，可以是自己的插件也可以是官方提供的插件如箭頭函數(shù)轉(zhuǎn)換插件@babel/plugin-transform-arrow-functions。

由此我們可以看出，我們需要轉(zhuǎn)換哪些新的語法，都可以將相關(guān)的插件一一列出，但是這其實非常復(fù)雜，因為我們往往需要根據(jù)兼容的瀏覽器的不同版本來確定需要引入哪些插件，為了解決這個問題，babel給我們提供了一個預(yù)設(shè)插件組，即@babel/preset-env，可以根據(jù)選項參數(shù)來靈活地決定提供哪些插件。

• @babel/polyfill：@babel/preset-env只是提供了語法轉(zhuǎn)換的規(guī)則，但是它并不能彌補瀏覽器缺失的一些新的功能，如一些內(nèi)置的方法和對象，如Promise,Array.from等，此時就需要polyfill來做js得墊片，彌補低版本瀏覽器缺失的這些新功能。

我們需要注意的是，polyfill的體積是很大的，如果我們不做特殊說明，它會把你目標(biāo)瀏覽器中缺失的所有的es6的新的功能都做墊片處理。但是我們沒有用到的那部分功能的轉(zhuǎn)換其實是無意義的，造成打包后的體積無謂的增大，所以通常，我們會在presets的選項里，配置"useBuiltIns": “usage”,這樣一方面只對使用的新功能做墊片，另一方面，也不需要我們單獨引入import '@babel/polyfill’了，它會在使用的地方自動注入。

• babel-loader：理解成一個加載器，webpack通過babel-loader這個中間橋梁告訴webpack怎樣去調(diào)用@babel/core、@babel/preset-env 、@babel/polyfill這些規(guī)則（語法轉(zhuǎn)換和彌補缺失）去編譯js。
• @babel/plugin-transform-runtime：polyfill的墊片是在全局變量上掛載目標(biāo)瀏覽器缺失的功能，因此在開發(fā)類庫，第三方模塊或者組件庫時，就不能再使用babel-polyfill了，否則可能會造成全局污染，此時應(yīng)該使用transform-runtime。transform-runtime的轉(zhuǎn)換是非侵入性的，也就是它不會污染你的原有的方法。遇到需要轉(zhuǎn)換的方法它會另起一個名字，否則會直接影響使用庫的業(yè)務(wù)代碼。

故開發(fā)類庫，第三方模塊或者組件庫時使用transform-runtime，平常的項目使用babel-polyfill即可.

rules的配置如下：

module: {rules:[{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.jsx?$/,  // 匹配文件路徑的正則表達(dá)式，通常我們都是匹配文件類型后綴exclude: /node_modules/, // 排除掉node_modules這個文件夾的js文件include: [path.resolve(__dirname,'src') // 指定哪些路徑下的文件需要經(jīng)過 loader 處理],use: { // 指定使用的 loaderloader: 'babel-loader', // babel-loader 可以使用 babel 來將 ES6 代碼轉(zhuǎn)譯為瀏覽器可以執(zhí)行的的 ES5 代碼options: {presets: ['@babel/preset-env']}}}]
}

plugin

插件?于 bundle ?件的優(yōu)化，資源管理和環(huán)境變量注?,作?于整個構(gòu)建過程。

常用的plugin:

• CommonsChunkPlugin：將chunks相同的模塊代碼提取成公共js，webpack4.x版本使用optimization.SplitChunks
• cleanWebpackPlugin：清理構(gòu)建目錄
• ExtractTextWebpackPlugin：將CSS從bundle文件里提取成一個獨立的CSS文件（webpack3.x版本），webpack4.x版本使用mini-css-extract-plugin
• CopyWebpackPlugin：將文件或者文件夾拷貝到構(gòu)建的輸出目錄
• HtmlWebpackPlugin：創(chuàng)建html文件去承載輸出的bundle（webpack4.x使用4.x版本HtmlWebpackPlugin）
• UglifyjsWebpackPlugin：壓縮JS
• ZipWebpackPlugin：將打包出的資源生成一個zip包

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),]
}

在 webpack 的構(gòu)建流程中，plugin 用于處理更多其他的一些構(gòu)建任務(wù)。可以這么理解，模塊代碼轉(zhuǎn)換的工作由 loader 來處理，除此之外的其他任何工作都可以交由 plugin 來完成。

例如，使用 copy-webpack-plugin 來復(fù)制其他不需要 loader 處理的文件，只需在配置中通過 plugins 字段添加新的 plugin 即可：

webpack4.x安裝copy-webpack-plugin@6 版本

 new CopyWebpackPlugin({patterns: [{from: path.resolve(__dirname, "../static"),to: 'static',globOptions: {ignore: [".*"]}}]
})

mode

mode，構(gòu)建模式是 webpack4引入的新概念，用于方便快捷地指定一些常用的默認(rèn)優(yōu)化配置。

mode取值：

• development：開發(fā)環(huán)境
• production：生產(chǎn)環(huán)境
• none ：不需要任何默認(rèn)優(yōu)化配置

示例：

module.exports = {mode: 'development', // 指定構(gòu)建模式為 development// ...
}

development 和 production 模式的區(qū)別：

• 這兩個模式會使用 DefinePlugin 來將 process.env.NODE_ENV 的值分別設(shè)置為 development 和 production，方便開發(fā)者在項目業(yè)務(wù)代碼中判斷當(dāng)前構(gòu)建模式。
• production 模式會啟用TerserPlugin來壓縮JS代碼，讓生成的代碼文件更小。
• development 模式會啟用 devtools: ‘eval’ 配置，提升構(gòu)建和再構(gòu)建的速度。
  

前端構(gòu)建基礎(chǔ)配置

關(guān)聯(lián)HTML插件html-webpack-plugin

webpack4.x對應(yīng)的html-webpack-plugin@4

npm install html-webpack-plugin@4 -D 

webpack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),]
}

構(gòu)建 CSS

webpack4.x安裝style-loader2.x、css-loader3.x

安裝：

npm i css-loader@3 style-loader@2 -D

配置中引入 loader 來解析和處理 CSS 文件：

module: {rules: [{test: /\.css$/,include: [path.resolve(__dirname, 'src')],use: ['style-loader', 'css-loader'],}]
}

• css-loader 負(fù)責(zé)解析 CSS 代碼，主要是為了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明；
• style-loader 會將 css-loader 解析的結(jié)果轉(zhuǎn)變成 JS 代碼，運行時動態(tài)插入 style 標(biāo)簽來讓 CSS 代碼生效。

如果需要單獨把 CSS 文件分離出來，我們需要使用 mini-css-extract-plugin 插件。

注：v4 版本之后才開始使用 mini-css-extract-plugin，之前的版本是使用 extract-text-webpack-plugin。

安裝mini-css-extract-plugin插件：

npm i mini-css-extract-plugin -D

配置：

解析 ES6和React JSX

解析 ES6

webpack4.x安裝@babel/core,@babel/preset-env,babel-loader@8

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

在根路徑下新建一個.babelrc文件，增加ES6的babel preset配置，代碼如下：

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

webpack.config.js配置：

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

解析 React JSX

安裝：

npm i @babel/preset-react -D

npm i react react-dom -S

在.babelrc文件中添加react相關(guān)配置：

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

編寫一個示例代碼JS，例如src/search.js：

'use strict'import React from 'react'
import ReactDOM from 'react-dom'class Search extends React.Component {render() {return <div>Search Text</div>}
}ReactDOM.render(<Search />, document.getElementById('root'))

然后編譯后 引用編譯后的JS查看效果即可。其中在dist中編寫的search.html示例需要添加root這個dom節(jié)點。

解析CSS、Less和Sass

解析CSS

解析css,需要安裝style-loader和css-loader。

其中webpack4.x安裝style-loader2.x、css-loader3.x:

npm i css-loader@3 style-loader@2 -D

版本參考：https://github.com/webpack-contrib/style-loader/blob/v2.0.0/package.json

rules配置：

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

解析Less

解析less,需要安裝less、less-loader。

其中webpack4.x建議安裝less-loader@6（less-loader@7.0.1也支持webpack4.x）

npm i less less-loader@6 -D

版本參考：https://github.com/webpack-contrib/less-loader/blob/v6.2.0/package.json

rules配置如下：

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

解析sass

webpack4.x安裝依賴：

npm i sass-loader@7.3.1 node-sass@4.14.1 sass-resources-loader@2 sass-resources-loader@2.2.4 -D

element-ui依賴的sass-loder跟node-sass版本：

npm i sass-loader@10.2.0  sass@1.29.0 -D

rules配置：

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

解析圖片和字體

資源解析：解析圖片

解析圖片，可以安裝file-loader,其中file-loader最新版本為6.2.0，支持webpack4.x。

npm i file-loader -D

版本參考：https://github.com/webpack-contrib/file-loader/blob/v6.2.0/package.json

rules配置如下：

{test: /.(png|jpe?g|gif)$/,use: 'file-loader'
}

資源解析：解析字體

rules配置如下：

{test: /.(woff|woff2|eot|otf|ttf)$/,use: 'file-loader'
},

css參考樣式：

@font-face {font-family: 'SourceHeavy';src: url('./images/SourceHeavy.otf') format('truetype');
}.search-text {font-size: 20px;color: #f00;font-family: 'SourceHeavy';
}

資源解析：使用url-loader

url-loader 也可以處理圖?和字體,可以設(shè)置較?資源?動 base64,其中url-loader內(nèi)部實現(xiàn)也是使用的file-loader。

目前url-loader最新版本為4.1.1，支持webpack4.x.

npm i url-loader -D

版本參考：https://github.com/webpack-contrib/url-loader/blob/master/package.json

rules配置（把之前關(guān)于圖片的file-loader配置替換）：

 {test: /.(png|jpe?g|gif)$/,use: [{ loader: 'url-loader', options: { limit: 10240 } }],}

webpack中的文件監(jiān)聽

?件監(jiān)聽是在發(fā)現(xiàn)源碼發(fā)?變化時，?動重新構(gòu)建出新的輸出?件。

webpack 開啟監(jiān)聽模式，有兩種?式：

• 啟動 webpack 命令時，帶上 --watch 參數(shù)
• 在配置 webpack.config.js 中設(shè)置 watch: true

在package.json中添加命令如下：

  "scripts": {"watch": "webpack --watch"},

注：唯?缺陷：每次需要?動刷新瀏覽器。

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

輪詢判斷?件的最后編輯時間是否變化。

某個?件發(fā)?了變化，并不會?刻告訴監(jiān)聽者，?是先緩存起來，等 aggregateTimeout

module.export = {//默認(rèn) false，也就是不開啟watch: true,//只有開啟監(jiān)聽模式時，watchOptions才有意義wathcOptions: {//默認(rèn)為空，不監(jiān)聽的文件或者文件夾，支持正則匹配ignored: /node_modules/,//監(jiān)聽到變化發(fā)生后會等300ms再去執(zhí)行，默認(rèn)300msaggregateTimeout: 300,//判斷文件是否發(fā)生變化是通過不停詢問系統(tǒng)指定文件有沒有變化實現(xiàn)的，默認(rèn)每秒問1000次poll: 1000}
}

webpack中的熱更新及原理分析

熱更新：webpack-dev-server

• webpack-dev-server不刷新瀏覽器
• webpack-dev-server不輸出?件，?是放在內(nèi)存中
• 使? HotModuleReplacementPlugin插件

webpack4.x對應(yīng)安裝的webpack-dev-server版本3.x。

npm i webpack-dev-server@3 -D

package.json配置：

"scripts": {"dev": "webpack-dev-server --open"
}

其中open是構(gòu)建完成之后，自動開啟瀏覽器。

在webpack.config.js配置：

'use strict'const webpack = require('webpack');module.exports = {// 其他省略mode: 'development',plugins: [new webpack.HotModuleReplacementPlugin()],devServer: {contentBase: './dist',hot: true}
}

熱更新的原理分析：

• Webpack Compile:將JS編譯成Bundle
• HMR Server: 將熱更新的?件輸出給HMR Rumtime Bundle server: 提供?件在瀏覽器的訪問
• HMR Rumtime: 會被注?到瀏覽器，更新?件的變化
• bundle.js: 構(gòu)建輸出的?件

熱更新：使? webpack-dev-middleware

• WDM 將 webpack 輸出的?件傳輸給服務(wù)器
• 適?于靈活的定制場景

示例：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath
}));
app.listen(3000, function () {console.log('Example app listening on port 3000!\n');
});

文件指紋策略：chunkhash、contenthash和hash

注：文件指紋只能用于生產(chǎn)環(huán)境。

文件指紋如何生成

• Hash：和整個項?的構(gòu)建相關(guān)，只要項??件有修改，整個項?構(gòu)建的hash值就會更改
• Chunkhash：和webpack 打包的chunk 有關(guān)，不同的entry 會?成不同的chunkhash值
• Contenthash：根據(jù)?件內(nèi)容來定義hash ，?件內(nèi)容不變，則contenthash不變

文件指紋設(shè)置

• JS文件：設(shè)置output的filename，使?[chunkhash]。

output: {path: path.join(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js'}

• CSS文件：設(shè)置MiniCssExtractPlugin的filename，使?[contenthash]

webpack4.x安裝的mini-css-extract-plugin@1.0.0

npm i mini-css-extract-plugin@1.0.0 -D

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {// 其他省略mode: 'production',module: {rules: [{test: /.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},{test: /.less$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],}]},plugins: [new MiniCssExtractPlugin({filename: '[name]_[contenthash:8].css',}),],
}

插件參考地址：https://github.com/webpack-contrib/mini-css-extract-plugin/blob/v1.0.0/package.json

• 圖片文件：設(shè)置file-loader的name，使?[hash]

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {// 其他省略mode: 'production',module: {rules: [{test: /.(png|jpe?g|gif)$/,use: [{loader: 'file-loader',options: { name: '[name]_[hash:8].[ext]' },},],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: [{loader: 'file-loader',options: { name: '[name]_[hash:8].[ext]' },},]}]}
}

HTML 、CSS和JavaScript代碼壓縮

JS壓縮

webpack4及以后內(nèi)置了uglifyjs-webpack-plugin

CSS壓縮

需要安裝optimize-css-assets-webpack-plugin，同時使?cssnano。

說明：optimize-css-assets-webpack-plugin插件目前官網(wǎng)最新版本5.0.8，使用的webpack為^4.44.1。

npm i optimize-css-assets-webpack-plugin@5 cssnano@4 -D

插件配置地址:https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/master/package.json

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')module.exports = {// 其他省略mode: 'production',plugins: [new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'),}),],
}

HTML壓縮

安裝html-webpack-plugin，并設(shè)置壓縮參數(shù)。

其中webpack4.x對應(yīng)的html-webpack-plugin@4。

npm i html-webpack-plugin@4 -D

webpack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename: 'index.html',chunks: ['index'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/search.html'),filename: 'search.html',chunks: ['search'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),],
}

webpack.dev.js完整配置：

'use strict'const path = require('path')
const webpack = require('webpack')module.exports = {entry: {index: './src/index.js',search: './src/search.js',},output: {path: path.join(__dirname, 'dist'),filename: '[name].js',},mode: 'development',module: {rules: [{test: /.js$/,use: 'babel-loader',},{test: /.css$/,use: ['style-loader', 'css-loader'],},{test: /.less$/,use: ['style-loader', 'css-loader', 'less-loader'],},{test: /.(png|jpe?g|gif)$/,use: [{ loader: 'url-loader', options: { limit: 10240 } }],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: 'file-loader',},],},plugins: [new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename: 'index.html',chunks: ['index'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/search.html'),filename: 'search.html',chunks: ['search'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),],devServer: {contentBase: './dist',hot: true,},
}

webpack.prod.js完整配置：

'use strict'const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: {index: './src/index.js',search: './src/search.js',},output: {path: path.join(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js',},mode: 'production',module: {rules: [{test: /.js$/,use: 'babel-loader',},{test: /.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},{test: /.less$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],},{test: /.(png|jpe?g|gif)$/,use: [{loader: 'file-loader',options: { name: '[name]_[hash:8].[ext]' },},],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: [{loader: 'file-loader',options: { name: '[name]_[hash:8].[ext]' },},],},],},plugins: [new MiniCssExtractPlugin({filename: '[name]_[contenthash:8].css',}),new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'),}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename: 'index.html',chunks: ['index'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/search.html'),filename: 'search.html',chunks: ['search'],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),],
}

package.json:

{"name": "webpacktest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.prod.js","watch": "webpack --watch","dev": "webpack-dev-server --config webpack.dev.js --open"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.22.10","@babel/preset-env": "^7.22.10","@babel/preset-react": "^7.22.5","babel-loader": "^8.3.0","css-loader": "^3.6.0","cssnano": "^4.1.11","file-loader": "^6.2.0","html-webpack-plugin": "^4.5.2","less": "^4.2.0","less-loader": "^6.2.0","mini-css-extract-plugin": "^1.0.0","optimize-css-assets-webpack-plugin": "^5.0.8","react": "^18.2.0","react-dom": "^18.2.0","style-loader": "^2.0.0","url-loader": "^4.1.1","webpack": "^4.46.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.3"}
}

.babelrc配置：

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