【webpack4系列】webpack基础用法（二）

等你许久_孟然2024-09-16 7:09

文章目录

webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

entry

webpack 构建的入口entry，webpack 会读取这个文件，并从它开始解析依赖，在内部构件一个依赖图，这个依赖图会引用项目中使用到的各个模块，然后进行打包，生成一个或者多个 bundle 文件。

我们常见的项目中，如果是单页面应用，那么入口只有一个；如果是多个页面的项目，那么通常是一个页面会对应一个构建入口。

单⼊⼝：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 会解析多个文件的依赖然后打包到一起：

复制代码 
// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  }
}

动态 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) => {
  // 文件夹名称作为入口名称，值为对应的路径，可以省略 `index.js`，webpack 默认会寻找目录下的 index.js 文件
  entries[page] = path.resolve(pagesRoot, page);
  return entries;
}, {});

module.exports = {
  // 将 entries 对象作为入口配置
  entry: entries,

  // ...
};

output

output用来告诉 webpack 如何将编译后的文件输出到磁盘。webpack 构建生成的文件名、路径等都是可以配置的，在配置文件中使用 output 字段来进行设置：

复制代码 
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 名称，在这里即为 main
    path: path.join(__dirname, '/dist/[hash]'),
    // 路径中使用 hash，每次构建时会有一个不同 hash 值，可以用于避免发布新版本时浏览器缓存导致代码没有更新
    // 文件名中也可以使用 hash
  },
}

loader

我们在前端构建中会遇见需要使用各式各样的文件，例如 css 代码，图片，模板代码等。webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。例如我们需要 css-loader 来处理 .css 文件（这里其实还需要 style-loader），最终把不同格式的文件都解析成 js 代码，以便打包后在浏览器中运行。

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的 Loaders 有哪些？

  • babel-loader：转换ES6、ES7等JS新特性语法
  • css-loader：支持.css文件的加载和解析
  • less-loader：将less文件转换成css
  • ts-loader：将TS转换成JS
  • file-loader：进行图片、字体等的打包
  • raw-loader：将文件以字符串的形式导入
  • 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的语法转换是以插件的形式实现的，可以是自己的插件也可以是官方提供的插件如箭头函数转换插件@babel/plugin-transform-arrow-functions。

由此我们可以看出，我们需要转换哪些新的语法，都可以将相关的插件一一列出，但是这其实非常复杂，因为我们往往需要根据兼容的浏览器的不同版本来确定需要引入哪些插件，为了解决这个问题，babel给我们提供了一个预设插件组，即@babel/preset-env，可以根据选项参数来灵活地决定提供哪些插件。

  • @babel/polyfill：@babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能，如一些内置的方法和对象，如Promise,Array.from等，此时就需要polyfill来做js得垫片，弥补低版本浏览器缺失的这些新功能。

我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": "usage",这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill'了，它会在使用的地方自动注入。

  • babel-loader：理解成一个加载器，webpack通过babel-loader这个中间桥梁告诉webpack怎样去调用@babel/core、@babel/preset-env 、@babel/polyfill这些规则（语法转换和弥补缺失）去编译js。
  • @babel/plugin-transform-runtime：polyfill的垫片是在全局变量上挂载目标浏览器缺失的功能，因此在开发类库，第三方模块或者组件库时，就不能再使用babel-polyfill了，否则可能会造成全局污染，此时应该使用transform-runtime。transform-runtime的转换是非侵入性的，也就是它不会污染你的原有的方法。遇到需要转换的方法它会另起一个名字，否则会直接影响使用库的业务代码。

故开发类库，第三方模块或者组件库时使用transform-runtime，平常的项目使用babel-polyfill即可.

rules的配置如下：

复制代码 
module: {
    rules:[
        {
            test: /\.css$/,
            use: ['style-loader','css-loader']
        },
        {
            test: /\.jsx?$/,  // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
            exclude: /node_modules/, // 排除掉node_modules这个文件夹的js文件
            include: [
                path.resolve(__dirname,'src') // 指定哪些路径下的文件需要经过 loader 处理
            ],
            use: { // 指定使用的 loader
                loader: 'babel-loader', // babel-loader 可以使用 babel 来将 ES6 代码转译为浏览器可以执行的的 ES5 代码
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
    ]
}

plugin

插件⽤于 bundle ⽂件的优化，资源管理和环境变量注⼊,作⽤于整个构建过程。

常用的plugin:

  • CommonsChunkPlugin ：将chunks相同的模块代码提取成公共js，webpack4.x版本使用optimization.SplitChunks

  • cleanWebpackPlugin：清理构建目录

  • ExtractTextWebpackPlugin ：将CSS从bundle文件里提取成一个独立的CSS文件（webpack3.x版本），webpack4.x版本使用mini-css-extract-plugin

  • CopyWebpackPlugin：将文件或者文件夹拷贝到构建的输出目录

  • HtmlWebpackPlugin：创建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 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。

例如，使用 copy-webpack-plugin 来复制其他不需要 loader 处理的文件，只需在配置中通过 plugins 字段添加新的 plugin 即可：

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

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

mode

mode，构建模式是 webpack4引入的新概念，用于方便快捷地指定一些常用的默认优化配置。

mode取值：

  • development：开发环境
  • production：生产环境
  • none ：不需要任何默认优化配置

示例：

复制代码 
module.exports = {
  mode: 'development', // 指定构建模式为 development
  // ...
}

development 和 production 模式的区别：

  • 这两个模式会使用 DefinePlugin 来将 process.env.NODE_ENV 的值分别设置为 development 和 production，方便开发者在项目业务代码中判断当前构建模式。
  • production 模式会启用TerserPlugin来压缩JS代码，让生成的代码文件更小。
  • development 模式会启用 devtools: 'eval' 配置，提升构建和再构建的速度。

前端构建基础配置

关联HTML插件html-webpack-plugin

webpack4.x对应的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'
    }),
  ]
}

构建 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 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
  • style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 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相关配置：

复制代码 
{
  "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节点。

解析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 也可以处理图⽚和字体,可以设置较⼩资源⾃动 base64,其中url-loader内部实现也是使用的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配置（把之前关于图片的file-loader配置替换）：

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

webpack中的文件监听

⽂件监听是在发现源码发⽣变化时，⾃动重新构建出新的输出⽂件。

webpack 开启监听模式，有两种⽅式：

  • 启动 webpack 命令时，带上 --watch 参数
  • 在配置 webpack.config.js 中设置 watch: true

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

复制代码 
  "scripts": {
    "watch": "webpack --watch"
  },

注：唯⼀缺陷：每次需要⼿动刷新浏览器。

⽂件监听的原理分析:

轮询判断⽂件的最后编辑时间是否变化。

某个⽂件发⽣了变化，并不会⽴刻告诉监听者，⽽是先缓存起来，等 aggregateTimeout

复制代码 
module.export = {
    //默认 false，也就是不开启
    watch: true,
    //只有开启监听模式时，watchOptions才有意义
    wathcOptions: {
    //默认为空，不监听的文件或者文件夹，支持正则匹配
    ignored: /node_modules/,
    //监听到变化发生后会等300ms再去执行，默认300ms
    aggregateTimeout: 300,
    //判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次
    poll: 1000
    }
}

webpack中的热更新及原理分析

热更新：webpack-dev-server

  • webpack-dev-server不刷新浏览器
  • webpack-dev-server不输出⽂件，⽽是放在内存中
  • 使⽤ HotModuleReplacementPlugin插件

webpack4.x对应安装的webpack-dev-server版本3.x。

复制代码 
npm i webpack-dev-server@3 -D

package.json配置：

复制代码 
"scripts": {
    "dev": "webpack-dev-server --open"
}

其中open是构建完成之后，自动开启浏览器。

在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: 构建输出的⽂件

热更新：使⽤ webpack-dev-middleware

  • WDM 将 webpack 输出的⽂件传输给服务器
  • 适⽤于灵活的定制场景

示例：

复制代码 
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

注：文件指纹只能用于生产环境。

文件指纹如何生成

  • Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的hash值就会更改
  • Chunkhash：和webpack 打包的chunk 有关，不同的entry 会⽣成不同的chunkhash值
  • Contenthash：根据⽂件内容来定义hash ，⽂件内容不变，则contenthash不变

文件指纹设置

  • JS文件：设置output的filename，使⽤[chunkhash]。

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

  • CSS文件：设置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

  • 图片文件：设置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及以后内置了uglifyjs-webpack-plugin

CSS压缩

需要安装optimize-css-assets-webpack-plugin，同时使⽤cssnano。

说明：optimize-css-assets-webpack-plugin插件目前官网最新版本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，并设置压缩参数。

其中webpack4.x对应的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"]
}
相关推荐
0wioiw01 分钟前
Flutter基础（前端教程④-组件拼接）
前端·flutter
花生侠26 分钟前
记录：前端项目使用pnpm+husky（v9）+commitlint，提交代码格式化校验
前端
一涯33 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调41 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined242 分钟前
element中的Table改造成虚拟列表，并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析：依赖收集
前端·vue.js
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）