Webpack

🕗 发布于 2024-10-09 16:28 webpack 前端 node.js

一、webpack简介

官网：https://www.webpackjs.com/

1.webpack是什么

Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来,前端的所有资源文件(js/json/css/img/less/…都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

2.webpack的五个核心概念

2.1 webpack 五个核心概念

2.1.1 Entry

入口(Entry)指示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.1.2 Output

输出(Output)指示webpack 打包后的资源bundles 输出到哪里去，以及如何命名。

2.1.3 Loader

Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只处理JavaScript)

2.1.4 Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

2.1.5 Mode

模式(Mode)指示webpack 使用相应模式的配置。

选项	描述	特点
development	会将DefinePlugin 中process.env.NODE_ENV 的值设置为development。启用NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将DefinePlugin 中process.env.NODE_ENV 的值设置为production。启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和TerserPlugin。	能让代码优化上线运行的环境

二、webpack的使用

1.webpack的安装

注意：webpack的运行需要依赖node.js，需要先安装好node.js

初始化package.json文件
在项目的根目录下，需要创建一个包配置文件package.json，通过命令进行初始化
命令：npm init（注意：命名时不能有大写和中文，其他的设置默认按确定即可）
全局安装
可以直接调用相应的包
命令：npm i webpack webpack-cli -g
局部安装
在全局安装后，每一个项目下都应该安装一个webpack
命令：npm i webpack webpack-cli -D
目录结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20ab8ff08ba4429378f036586fe88e3d.png

2.webpack的使用（开发环境）

（1）打包js文件

在src目录下，创建一个index.js文件
index.js文件是webpack入口的起点文件
运行指令:
- 开发环境:
  - webpack ./src/index.js -o ./build/built.js --mode=development
  - webpack会以./src/index.js 为入口文件开始打包，打包后输出到./build/built.js整体打包环境,是开发环境
- 生产环境
  - webpack ./src/index.js -o ./build/built.js --mode=production
  - webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到./build/built.js整体打包环境，是生产环境
创建一个json文件
data.json

{
  "name": "zhangsan",
  "age": 18
}

在js中引入json文件
重新进行打包，发现webpack是可以处理js代码和json数据的
结论:
- webpack能处理js/json资源，不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码的步骤。

（2）打包样式资源

直接使用webpack打包是不能对样式资源进行打包的，因此需要借助loader才能对样式文件进行打包。
引入loader需要创建一个webpack.config.js文件
- webpack.config.js：webpack的配置文件
- 作用:指示 webpack干哪些活（当运行 webpack指令时，会加载里面的配置)
- 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs（一般在配置中的模块化采用的是commonjs，而在源代码中采用的是ES6语法）。

打包css文件

webpack.config.js

const {resolve} = require('path')

module.exports = {
  //入口起点
  entry:'./src/js/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹
    path:resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细loader配置
      {
        //匹配以css文件结尾的文件
        test: /\.css$/,
        //use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行
        //css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串
        //style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  //plugin的配置
  // plugins:[
  //   //详细plugin的配置
  // ],
  mode:'development',
 // mode:'production',
}

在这里插入图片描述

具体的配置可以参照官网，不仅是css资源，其他资源也有对应的配置

在这里插入图片描述

安装css-loader和style-loader
配置完成，创建相应的css文件，并且在入口文件index.js中引入
index.css

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}

在这里插入图片描述

执行webpack进行打包，在配置好webpack.config.js后，可以只输入webpack命令即可对项目进行的打包
打包成功后生成对应的文件，css代码加载在js代码中
在index.html中引入built.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
<script src="../build/built.js"></script>
</body>
</html>

在这里插入图片描述
打包less，不同的文件需要配置不同的loader，所以打包less文件需要重新配置一下

webpack.config.js

const {resolve} = require('path')

module.exports = {
  //入口起点
  entry:'./src/js/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹
    path:resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细loader配置
      {
        //匹配以css文件结尾的文件
        test: /\.css$/,
        //use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行
        //css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串
        //style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        //less-loader的作用是将less文件转换为css文件
        use: ['style-loader','css-loader','less-loader']
      }
    ]
  },
  //plugin的配置
  // plugins:[
  //   //详细plugin的配置
  // ],
  //生产模式还是开发模式
  mode:'development',
 // mode:'production',
}

在这里插入图片描述

安装less-loader，注意安装less-loader时需要安装less
index.less

#title{
  color:#fff;
}

在这里插入图片描述

在index.html中引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
<h1 id="title">hello</h1>
<script src="../build/built.js"></script>
</body>
</html>

在这里插入图片描述

（3）打包html资源

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //入口起点
  entry:'./src/js/index.js',
  //输出
  output:{
    //输出文件名
    filename:'built.js',
    //输出路径
    //__dirname是nodejs的变量，代表当前文件目录的绝对路径，后面接的build指的是当前目录下的build文件夹
    path:resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细loader配置
      {
        //匹配以css文件结尾的文件
        test: /\.css$/,
        //use数组中的loader执行顺序是：从右到左，或着从下到上，依次执行
        //css-loader将css文件变成commonjs模块加载在js中，里面的内容是样式字符串
        //style-loader创建style标签，将js中的样式资源插入进去，添加到header中生效
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        //less-loader的作用是将less文件转换为css文件
        use: ['style-loader','css-loader','less-loader']
      }
    ]
  },
  //plugin的配置
  plugins:[
    //详细plugin的配置
    new HtmlWebpackPlugin()
  ],
  //生产模式还是开发模式
  mode:'development',
 // mode:'production',
}

在这里插入图片描述

局部安装html-webpack-plugin
执行打包命令
new HtmlWebpackPlugin()的功能就是默认成一个html文件，并引入打包输出的所有资源，需要有结构的html文件，则需要在括号中配置。

（4）打包图片资源

下载安装loader 包

npm install --save-dev html-loader url-loader file-loader

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

（5）打包其他资源

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
            // 打包其他资源(除了html/js/css 资源以外的资源)
{
// 排除css/js/html 资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
    ],
mode: 'development'
};

（6）devserver

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(除了html/js/css 资源以外的资源)
{
// 排除css/js/html 资源
exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
    mode: 'development',
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip 压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
};

启动命令

 npx webpack-dev-server

（7）开发环境配置总结

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
// loader 的配置
{
// 处理less 资源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理css 资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
            {
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6 模块化
esModule: false,
outputPath: 'imgs'
}
},
            {
// 处理html 中img 资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
                    name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
    plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
    mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
};

3.webpack的使用（生产环境）

（1）提取css 成单独文件

安装插件

npm install --save-dev mini-css-extract-plugin

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style 标签，将样式放入
// 'style-loader',
// 这个loader 取代style-loader。作用：提取js 中的css 成单独文件
MiniCssExtractPlugin.loader,
// 将css 文件整合到js 文件中
'css-loader'
]
}
        ]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css 文件进行重命名
filename: 'css/built.css'
})
],
mode: 'development'
};

（2） css 兼容性处理

下载loader

npm install --save-dev postcss-loader postcss-preset-env

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
            }
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
};

package.json

"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}

（3）压缩css

下载插件

npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
                     }
]
}
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};

（4） js 语法检查

下载loader

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
            /*
语法检查： eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
设置检查规则：
package.json 中eslintConfig 中设置~
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint 的错误
fix: true
}
}
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};

package.json

"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}

（5）js 兼容性处理

下载loader

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
        path: resolve(__dirname, 'build')
},
    module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
                options: {
// 预设：指示babel 做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js 版本
corejs: {
version: 3
},
                                // 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
 };

（6） js 压缩

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
// 生产环境下会自动压缩js 代码
mode: 'production'
};

（7）HTML 压缩

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html 代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode: 'production'
};

（8）生产环境配置总结

webpack.config.js

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义nodejs 环境变量：决定使用browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json 中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
    module: {
rules: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
            /*
正常来讲，一个文件只能被一个loader 处理。
当一个文件要被多个loader 处理，那么一定要指定loader 执行的先后顺序：
先执行eslint 在执行babel
*/
            {
// 在package.json 中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
            {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
                }
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
            },
            {
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
    plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};

三、webpack5

通过持久缓存提高构建性能.
使用更好的算法和默认值来改善长期缓存.
通过更好的树摇和代码生成来改善捆绑包大小.
清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.
通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.

自动删除 Node.js Polyfills

早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。

尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。

webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。

迁移：

尽可能尝试使用与前端兼容的模块。
可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

Chunk 和模块 ID

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。

chunkIds: "deterministic", moduleIds: "deterministic"

Chunk ID

你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在开发环境来为 chunk 命名，生产环境还是有必要的

webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了

Tree Shaking

webpack 现在能够处理对嵌套模块的 tree shaking

// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from './inner';
export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

在生产环境中, inner 模块暴露的 b 会被删除

webpack 现在能够多个模块之前的关系

import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"

webpack 现在能处理对 Commonjs 的 tree shaking

Output

webpack 4 默认只能输出 ES5 代码

webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.

如：output.ecmaVersion: 2015

SplitChunk

// webpack4
minSize: 30000;
// webpack5
minSize: {
  javascript: 30000,
  style: 50000,
}

Caching

// 配置缓存
cache: {
  // 磁盘存储
  type: "filesystem",
  buildDependencies: {
    // 当配置修改时，缓存失效
    config: [__filename]
  }
}

缓存将存储到 node_modules/.cache/webpack

监视输出文件

之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。

此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。

默认值

entry: "./src/index.js
output.path: path.resolve(__dirname, "dist")
output.filename: "[name].js"

原文地址：https://blog.csdn.net/SuihideOmelet/article/details/115027566

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：用伪代码Prompt让LLM进行图推理，生成更精准内容
下一篇：Python国庆作业

达梦DBLINK访问ORACLE配置方法
本文介绍了达梦DBLINK的配置方法。有3部分内容，1）达梦访问到达梦的配置方法；2）通过OCI方式访问ORACLE的配置方法；3）通过ODBC方式访问ORACLE的配置方法。
阅读更多2024-10-11
串口（UART）的FPGA设计（接收与发送模块）
串口（UART）全称通用异步收发传输器（Universal Asynchronous Receiver/Transmitter)，主要用于数据间的串行传递，是一种全双工传输模式。特点：1.数据是一位
阅读更多2024-10-11
深度学习速通系列:CRF是什么
给定一个观察序列XXX= {x1x2xnx1x2xn}和一个状态序列Yy1y2ynYy1y2yn，CRF 模型的目标是学习条件概率分布PY∣XP(Y|X)PY∣X。
阅读更多2024-10-11
vue3 elementUI 表单验证
1、前端配置正则表达式入存入数据库，前端表单反显校验。
阅读更多2024-10-11
在 nodejs 和 MySQL 中，分页查询的占位符
这是为了确保这些值被正确地转义，尽管在这个特定的例子中，由于它们是整数，所以实际上不需要转义。然而，使用占位符可以使代码更加清晰，并且如果将来这些值变为包含用户输入的数据，那么使用占位符将确保安全性。
阅读更多2024-10-11
【重学 MySQL】六十、空间类型
在MySQL中，空间类型（Spatial Types）主要用于支持地理特征的生成、存储和分析。这些地理特征可以表示世界上具有位置的任何东西，如实体（如山）、空间（如办公楼）或可定义的位置（如十字路口等
阅读更多2024-10-11
Python利器：掌握Counter类
Counter是dict的一个子类，用于计数可哈希对象。它是一个集合，其中元素存储为字典键，它们的计数存储为字典的值。掌握Counter类可以让你在Python编程中事半功倍。它不仅可以简化代码，还能
阅读更多2024-10-11
泽众P-One性能测试平台在测试场景快速启动如何查看监控信息
P-One支持多种资源监控分析，包括服务器、JVM、JMX、Redis、Nginx、MySQL、Oracle、Docker、K8s、RabbitMQ等。配置完成后，点击“执行场景集”按钮，P-One将
阅读更多2024-10-11
Robot Operating System——地图的元数据
nav_msgs::msg::MapMetaData 是 ROS 2 中的一个消息类型，用于表示地图的元数据。它包含地图的基本信息，如分辨率、宽度、高度和原点位置等。MapMetaData 在机器人导
阅读更多2024-10-11
PyEcharts教程（003）：PyEcharts配置项
PyEcharts配置项。
阅读更多2024-10-11

Webpack

一、webpack简介

1.webpack是什么

2.webpack的五个核心概念

2.1 webpack 五个核心概念

2.1.1 Entry

2.1.2 Output

2.1.3 Loader

2.1.4 Plugins

2.1.5 Mode

二、webpack的使用

1.webpack的安装

2.webpack的使用（开发环境）

（1）打包js文件

（2）打包样式资源

（3）打包html资源

（4）打包图片资源

（5） 打包其他资源

（6）devserver

（7）开发环境配置总结

3.webpack的使用（生产环境）

（1）提取css 成单独文件

（2） css 兼容性处理

（3）压缩css

（4） js 语法检查

（5）js 兼容性处理

（6） js 压缩

（7）HTML 压缩

（8）生产环境配置总结

三、webpack5

自动删除 Node.js Polyfills

Chunk 和模块 ID

Chunk ID

Tree Shaking

Output

SplitChunk

Caching

监视输出文件

默认值

相关文章

（5）打包其他资源