Webpack包

黑马程序员视频地址：

Node.js与Webpack-16.Webpack简介以及体验

前言：

本篇中部分标题后标有数字，代表学习顺序 ，同时也可以作为使用顺序参考

webpack包 

基础认识

初步使用

下载webpack包和webpack-cli包

注意点：

1.使用npm命令前记得初始化，获取package.json文件

2.在项目路径下 下载webpack和webpack-cli包

（不同项目用到的版本不一样，因此需要下载到当前路径下）

3. --save-dev表示在开发环境下使用，书写位置无要求，左边右边都可以

开发模式：本地开发测试时的环境

生产模式：供用户使用的服务器的环境

npm i webpack webpack-cli --save-dev

配置局部自定义命令（防止用错其他项目中不同版本的webpack）

//package.json

{
 //...
  "scripts": {
    //...
    "build": "webpack"    //自定义命令：实际命令
  },
  //...
}

运行自定义命令，进行打包

此刻使用的都是基本配置

其他配置包含内置配置与其他包辅助配置，见下文

npm run 自定义命令

修改打包入口和打包出口

 默认打包入口是src中的index.js文件， 默认打包出口是dist中的main.js文件

webpack中文文档：

概念 | webpack 中文文档

在项目根目录下创建webpack配置文件webpack.config.js

目标：

1.修改入口文件为：src/login/index.js

2.修改出口文件为：dist/login/index.js

const path = require('path');

module.exports = {
  //入口
  entry: path.resolve(__dirname, "src/login/index.js"),
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'
  },
};

运行结果： 

清空输出目录 

webpack版本在5.2.0.0及以上时可配置clean: true参数使每次运行时先清空输出目录

const path = require('path');

module.exports = {
  //入口
  entry: path.resolve(__dirname, "src/login/index.js"),
  //出口
  output: {
    path: path.resolve(__dirname, 'dist/login'),
    filename: 'index.js',
    clean: true
  },
};

结果运行：

 

插件（Plugin）

插件：使webpack拥有更多功能

文档：插件 | webpack 中文文档

❶HtmlWebpackPlugin（生成HTML文件）

该插件会自动将webpack打包的其他文件引入到一个新建的（或自定义的）HTML文件中

此处代码为配置自定义HTML文件（以已有HTML为模板创建HTML文件）

文档：

HtmlWebpackPlugin | webpack 中文文档

1.安装命令（报错可以再次运行重新下载）

npm i --save-dev html-webpack-plugin

2.在webpack.config.js中配置

插件对象放在webpack.config.js文件中的plugins数组里

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      template = path.resolve(__dirname, "public/login.html"),  //模板文件
      filename = path.resolve(__dirname, "dist/login/login.html") //输出文件
    })
  ]
}

 HtmlWebpackPlugin对象属性值：

GitHub - jantimon/html-webpack-plugin：简化 HTML 文件的创建，以便为您的 webpack 捆绑包提供服务

注意：github需要使用加速器打开，可以下载Steam++ 

 3.运行打包命令 npm run 自定义命令

❹MiniCssExtractPlugin（提取css代码）

❗❗❗该插件不能与style-loader加载器一起使用

style-loader：把css代码打包到js文件中，并插入到DOM上

MiniCssExtractPlugin：

1.把css代码单独提取出来成一个.css文件

2.默认不会压缩css代码

文档：

MiniCssExtractPlugin | webpack 中文文档

 1.安装命令

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

2.在webpack.config.js中配置

//...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  //...
  //插件（给webpack提供更多功能）
  plugins: [
    //...
    new MiniCssExtractPlugin()    //这里可以传值，但只能传相对路径
  ],
  //加载器（让webpack识别更多模块文件内容）
  module: {
    rules: [
      {
        test: /\.css$/i, 
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3.打包

❺CssMinimizerWebpackPlugin（压缩css代码）

MiniCssExtractPlugin插件默认不会压缩css代码，因此需要借助本插件

文档：CssMinimizerWebpackPlugin | webpack 中文文档

1.安装命令

npm i css-minimizer-webpack-plugin --save-dev

 2.在webpack.config.js文件中配置

在minimizer中原本配置了压缩js的语法，重新配置会导致原来的被覆盖，解决方法如下：

A.在 webpack@5 中，可以使用 `...` 语法来扩展原有配置（推荐）

B.自行下载配置TerserWebpackPlugin插件

//...
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  //...
  //优化打包过程
  optimization: {
    //最小化
    minimizer: [
      `...`,    //在 webpack@5 中，可以使用 `...` 语法来扩展原有的执行压缩js代码的语法
      new CssMinimizerPlugin(),
    ],
  },
};

3.打包

⓫DefinePlugin（前端注入环境变量）

问题：cross-env设置的变量如上文process.env.NODE_ENV只能在node.js中生效，前端代码无法访问

解决：使用该插件将node.js中的变量的值编写进编译的文件中

文档：DefinePlugin | webpack 中文文档

注意：DefinePlugin是webpack内置的插件，无需下载

 配置webpack.config.js

原理：该插件会把js文件中的变量直接改写成右边的值并编译

注意：右侧被改写的值的类型得是字符串，不能是变量

如果右侧值是字符串：左侧变量会直接被改写成字符串（我们要这种效果）

如果右侧值是变量：左侧变量会直接被改写成（以右侧变量的值为名称）的变量，若此时该变量的值为未知，会报错

//...
const webpack = require("webpack")

module.exports = {
  //...
  //插件（给webpack提供更多功能）
  plugins: [
    //...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  //...
};

加载器（Loader）

webpack默认只识别js代码，要识别更多内容要使用加载器

文档：Loaders | webpack 中文文档

❷css-loader、style-loader（打包css文件）

该加载器用来将css代码进行打包

文档：

css-loader | webpack 中文文档

style-loader | webpack 中文文档

1.安装命令

npm i --save-dev css-loader style-loader

2.在src/login/index.js中引入index.css文件让其产生关联性，让webpack打包

import "./index.css"

3.在webpack.config.js文件中配置

在rules中的use数组中使用加载器

//...
module.exports = {
  //...
  //加载器（让webpack识别更多模块文件内容）
  module: {
    rules: [
      {
        test: /\.css$/i,  //匹配.css文件，i表示忽略大小写
        use: ['style-loader', 'css-loader'],  //从后往前使用
      },
    ],
  },
};

4.打包

默认生成css代码在js文件中 

❻less-loader（打包less文件）

打包less文件

文档：

less-loader | webpack 中文文档

1.安装less和less-loader

npm i less less-loader --save-dev

2.在src/login/index.js中引入index.less文件让其产生关联性，让webpack打包

import "./index.less"

3.配置webpack.config.js文件

//...
module.exports = {
  //...
  //加载器（让webpack识别更多模块文件内容）
  module: {
    rules: [
      //{
        //test: /\.css$/i,  //匹配.css文件，i表示忽略大小写
        use: ['style-loader', 'css-loader'],      //'style-loader'或者下一行的
        //use: [MiniCssExtractPlugin.loader, "css-loader"],    //MiniCssExtractPlugin.loader
      //},
      {
        test: /\.less$/i,//匹配.less文件
        use: [
          // compiles Less to CSS
          MiniCssExtractPlugin.loader,    //需要与css配置中选择一致的
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
  //...
};

内置配置

webpack内置配置，无需下载

❼资源模块（打包图片、字体）

在webpack@5后，新增了内置的资源模块，可以不使用加载器来打包字体、图片等资源

内置资源模块默认情况下可进行的操作十分局限，如不能使用import导入图片资源

因此需要进一步配置

在webpack.config.js文件中配置 

资源模块类型：

asset 在导出一个 data URI （小于8kb）和发送一个单独的文件（大于8kb）之间自动选择。

导出一个 data URI：直接把图片转成base64镶嵌在js文件中

发送一个单独的文件：在外部存放图片

另外三种见资源模块 | webpack 中文文档

导出文件路径：

导出文件路径是在配置的出口路径的基础上导出的

✓占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
✓占位符【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
✓占位符【query】保留引入文件时代码中查询参数（只有URL 下生效） 

//...

module.exports = {
  //...
  //加载器（让webpack识别更多模块文件内容）
  module: {
    rules: [
      //...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,    //匹配的资源类型
        type: 'asset',    //资源模块类型
        generator: {
          filename: 'static/[hash][ext][query]'    //导出文件路径
        }
      },
    ],
  },
   //...
};

 ⓬开发环境调错（devtool）

作用：精准定位报错位置

文档：Devtool | webpack 中文文档

注意：source map应仅在开发环境使用，在生产环境应关闭

配置webpack.config.js 

//...

module.exports = {
    //...
    devtool: "inline-source-map"
}

配合环境变量实现不同模式开关调错

//...

const config = {
  //...
};

if(process.env.NODE_ENV === "development")
{
  config.devtool = "inline-source-map"
}

module.exports = config

 ⓭解析别名

在webpack.config.js配置文件中自定义别名来代表绝对路径

//...

const config = {
  //...
  //解析
  resolve: {
      //别名
      alias: {
      "@": path.resolve(__dirname, "src")
      }
  }
}

使用

import youAxios from "@/utils/request.js"

 ⓮CDN的使用

定义：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在CDN 网络中各个服务器中，供用户就近请求获取

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

免费的CDN网站：

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选

UNPKG

unpkg的使用方法：

直接在网站后面加上 /包名 即可，如：https://unpkg.com/form-serialize

需求：开发模式下使用本地第三方库，生产模式下使用CDN加载引入

1.在需要引入cdn远程模块的HTML文件中加入判断

⭐️待解决问:1：为什么要引入暂时没用到的bootstrap.min.js文件

黑马的解释：屏蔽掉import "bootstrap/dist/css/bootstrap.min.css"后，其会在原地留下一个bootstrap全局变量，如果不引入会使浏览器在运行时该变量报错

  <% if(htmlWebpackPlugin.options.useCdn){ %>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css">
  <% } %>

    <!--当括号内为真时才会执行中间的代码-->
    <!--而条件控制在webpack.config.js中配置-->

  <% if(htmlWebpackPlugin.options.useCdn){ %>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.8/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
  <% } %>

2.配置执行上述判断的条件

在webpack.config.js中配置

当useCdn为true时执行上述中间代码

//...

const config = {
  ...
  //插件（给webpack提供更多功能）
  plugins: [
    new HtmlWebpackPlugin({
      //...
      useCdn: process.env.NODE_ENV === "production"    
    }),
    //...
  ],
  //...
};

3.配置屏蔽掉引用本地模块的代码

参数externals

键（key）表示模块的导入路径，值（value）表示在全局作用域中可以访问该模块的变量名

import axios from "axios"

import 值1 from "值2"

键：写双引号内的值，值2

值：写import后的值，值1

//...

const config = {
  //...
};

if(process.env.NODE_ENV === "production")
{
  config.externals = {
    //key : value
    "axios": "axios",
    "bootstrap/dist/css/bootstrap.min.css": "bootstrap"
  }
}

module.exports = config

 ⓱分割公共代码（splitChunks）

抽离出公共js代码

//...

const config = {
  //...
  //优化
  optimization: {
    //...
    //分割公共代码
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }
  },
  //...
};

其他包 

利用npm下载其他包，配合webpack包

 ❸拓展：引入bootstrap包的css文件

1.安装命令

npm i bootstrap

2.引入包（因为要使用css文件，默认入口不是css样式，所以具体到css文件）（建议先引入第三方包）

//src/login/index.js

import "bootstrap/dist/css/bootstrap.min.css"

3.打包

❽拓展：引入axios并配置基地址

1.安装axios包

npm i axios

2.引入axios，配置完基地址后再导出axios

import axios from "axios"    //导入axios
// axios 公共配置
// 基地址
axios.defaults.baseURL = 'http://geek.itheima.net'
// 添加请求拦截器
//...

// 添加响应拦截器
//...

export default axios    //导出axios，供其他文件使用

3.在使用页面导入后即可使用

import myAxios from "../utils/request.js"

❾开发环境 webpack-dev-server

用来热更新代码

注意：

1.webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务

2.默认以 public 文件夹作为服务器根目录

3.webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）

1.安装 webpack-dev-server 包

npm i --save-dev webpack-dev-server

2.在package.json配置自定义命令

--open：启动serve后自动弹出浏览器，不设置的话运行后终端会自动告诉你浏览器地址

{
  //...
  "scripts": {
    //...
    "dev": "webpack serve --open"    //dev是自定义的
  },
  //...
}

3.设置打包模式

development：调试代码，实时加载，模块热替换（快）

production：压缩代码，资源优化，更轻量等（小）

 设置方式：

  （1）：mode 选项设置（在webpack.config.js中配置，极其不推荐，会导致自定义命令build打包时，也变成development模式）

  （2）：--mode= 命令行设置（优先级高，在package.json中配置，推荐）

//（1）webpack.config.js
//...
module.exports = {
  //打包模式（development 开发模式-使用相关内置优化）
  mode: "development",
  //...
};
//（2）
{
  //...
  "scripts": {
    //...
    "build": "webpack --mode=production",
    "dev": "webpack serve --open --mode=development"
  },
  //...
}

注意：

webpack会更新dist文件夹里的文件，是可视化的

webpack serve则是不可视的，在内存中运行

❿灵活切换模式（含cross-env包配置环境变量）

目标：

在开发环境下，使用style-loader使加载速度更快

在生产环境下，使用MiniCssExtractPlugin插件，单独抽离出css文件

方法一：（不推荐）webpack.config.js配置中，不再导出对象，而是导出函数

缺点：局限性大，只支持两种模式

文档：模式(Mode) | webpack 中文文档

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    //开发模式下执行
  }

  if (argv.mode === 'production') {
    //生产模式下执行
  }
};

 方法二：借助cross-env包，设置参数

cross-env是一个用于跨平台设置和使用环境变量的工具

缺点：需要进行判断，只适用于差异小的模式

1.安装cross-env包

npm i cross-env --save-dev

2.在package.json文件中配置自定义命令，快速传递参数名和值

注意：参数会绑定到node.js中内置的环境变量process.env对象中

{
  //...
  "scripts": {
    //...
    //格式：cross-env 变量名1=值1 变量名2=值2（可以传多个）
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
  },
  //...
}

3.在webpack.config.js中使用变量进行判断

//...

module.exports = {
  //...
  //加载器
  module: {
    rules: [
      {
        //...
        use: [process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader", "css-loader"],
      },
      {
        //...
        use: [
          //...
          process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader",
          //...
        ],
      },
      //...
    ],
  },
  //...
};

方法三：配置不同的webpack.config.js

适用于差异较大的模式

文档：生产环境 | webpack 中文文档

此处暂时不进行讲解

多页面打包

webpack.config.js配置如下 

讲解在注释中，标⭐️的

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const webpack = require("webpack")

const config = {
  //入口
  entry: {    //⭐️改成对象形式，一个属性对应一个整合js文件
    "login": path.resolve(__dirname, "src/login/index.js"),
    "content": path.resolve(__dirname, "src/content/index.js")
  },
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js', //⭐️[name]为占位符，会与entry的属性保持一致
    clean: true
  },
  //插件（给webpack提供更多功能）
  plugins: [
    new HtmlWebpackPlugin({    //⭐️每一个HTMLwebpackPlugin对象代表了一个HTML页面
      template: path.resolve(__dirname, "public/login.html"),  //模板文件
      filename: path.resolve(__dirname, "dist/login/login.html"), //输出文件
      useCdn: process.env.NODE_ENV === "production",
      chunks: ["login"]    //⭐️标记引入哪一个打包的整合js文件
    }),
    new HtmlWebpackPlugin({    //⭐️这是第二个页面
      template: path.resolve(__dirname, "public/content.html"),  //模板文件
      filename: path.resolve(__dirname, "dist/content/content.html"), //输出文件
      useCdn: process.env.NODE_ENV === "production",
      chunks: ["content"]
    }),
    new MiniCssExtractPlugin({
      filename: "./[name]/index.css"    //⭐️占位符同理，entry有几个值，就会生产几个css
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  //加载器（让webpack识别更多模块文件内容）
  module: {
    rules: [
      {
        test: /\.css$/i,  //匹配.css文件，i表示忽略大小写
        //use: ['style-loader', 'css-loader'],  //从后往前使用
        use: [process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,//匹配.less文件
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader",
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'static/[hash][ext][query]'
        }
      },
    ],
  },
  //优化
  optimization: {
    //最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
  //解析
  resolve: {
    //别名
    alias: {
    "@": path.resolve(__dirname, "src")
    }
  },
};

if(process.env.NODE_ENV === "development")
{
  config.devtool = "inline-source-map"
}

if(process.env.NODE_ENV === "production")
{
  config.externals = {
    "axios": "axios",
    "bootstrap/dist/css/bootstrap.min.css": "bootstrap"
  }
}
module.exports = config

一些注意事项

1.form-serializeCDN在第二个CDN网站上有

2.form-serialize和wangeditor5等不确定包名是正确，可以在npm | Home查询 

如wangeditor5的安装命令为：npm i @wangeditor/editor

3.form-serialize本地包安装命令不需要加--save-dev让其在开发环境，因为生产环境中也要使用

4.wangeditor5只能用require导入

const wangEditor = require("@wangeditor/editor")

webpack.config.js完整代码

黑马程序员配置的完整代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const webpack = require('webpack')

const config = {
  // 打包模式（development 开发模式-使用相关内置优化）
  // mode: 'development',
  // 入口
  // entry: path.resolve(__dirname, 'src/login/index.js'),
  entry: {
    'login': path.resolve(__dirname, 'src/login/index.js'),
    'content': path.resolve(__dirname, 'src/content/index.js'),
    'publish': path.resolve(__dirname, 'src/publish/index.js')
  },
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js',
    clean: true // 生成打包后内容之前，清空输出目录
  },
  // 插件（给 Webpack 提供更多功能）
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/login.html'), // 模板文件
      filename: path.resolve(__dirname, 'dist/login/index.html'), // 输出文件
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
      chunks: ['login'] // 引入哪些打包后的模块（和 entry 的 key 一致）
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/content.html'), // 模板文件
      filename: path.resolve(__dirname, 'dist/content/index.html'), // 输出文件
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
      chunks: ['content']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/publish.html'), // 模板文件
      filename: path.resolve(__dirname, 'dist/publish/index.html'), // 输出文件
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
      chunks: ['publish']
    }),
    new MiniCssExtractPlugin({
      filename: './[name]/index.css'
    }), // 生成 css 文件
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  // 加载器（让 webpack 识别更多模块文件内容）
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ],
  },
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释（保证 js 代码还能压缩）
      `...`,
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }
  },
  // 解析
  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}
// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}
// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios',
    'form-serialize': 'serialize',
    '@wangeditor/editor': 'wangEditor'
  }
}

module.exports = config

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/970192.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL数据库入门到大蛇尚硅谷宋红康老师笔记 基础篇 part 10

MySQL数据库入门到大蛇尚硅谷宋红康老师笔记 基础篇 part 10

第10章_创建和管理表 DDL&#xff1a;数据定义语言。CREATE \ALTER\ DROP \RENAME TRUNCATE DML&#xff1a;数据操作语言。INSERT \DELETE \UPDATE \SELECT&#xff08;重中之重&#xff09; DCL&#xff1a;数据控制语言。COMMIT \…
阅读更多...
【DeepSeek】DeepSeek R1 本地windows部署（Ollama+Docker+OpenWebUI）

【DeepSeek】DeepSeek R1 本地windows部署（Ollama+Docker+OpenWebUI）

1、背景&#xff1a; 2025年1月&#xff0c;DeepSeek 正式发布 DeepSeek-R1 推理大模型。DeepSeek-R1 因其成本价格低廉&#xff0c;性能卓越&#xff0c;在 AI 行业引起了广泛关注。DeepSeek 提供了多种使用方式&#xff0c;满足不同用户的需求和场景。本地部署在数据安全、性…
阅读更多...
【Pico】使用Pico进行无线串流搜索不到电脑

【Pico】使用Pico进行无线串流搜索不到电脑

使用Pico进行无线串流搜索不到电脑 官串方式&#xff1a;使用Pico互联连接电脑。 故障排查 以下来自官方文档 请按照以下步骡排除故障&#xff1a; 确认电脑和一体机连接了相同的路由器WiFi网络(相同网段) IP地址通常为192.168.XX&#xff0c;若两设备的IP地址前三段相同&…
阅读更多...
DeepSeek教unity------MessagePack-02

DeepSeek教unity------MessagePack-02

内置支持类型&#xff1a; 对象序列化 MessagePack for C# 可以序列化你自己定义的公共类或结构体类型。默认情况下&#xff0c;可序列化的类型必须用 [MessagePackObject] 属性进行注解&#xff0c;成员需要用 [Key] 属性进行注解。键可以是索引&#xff08;整数&#xff09;…
阅读更多...
部门管理（体验，最原始方法来做，Django+mysql）

部门管理（体验，最原始方法来做，Django+mysql）

本人初学&#xff0c;写完代码在此记录和复盘 在创建和注册完APP之后&#xff08;我的命名是employees&#xff09;&#xff0c;编写models.py文件创建表 手动插入了几条数据 1.部门查询 urls.py和views.py在编写之前&#xff0c;都要注意导入对应的库 urls.py&#xff1a;…
阅读更多...
爬虫实战：利用代理ip爬取推特网站数据

爬虫实战：利用代理ip爬取推特网站数据

引言 亮数据-网络IP代理及全网数据一站式服务商屡获殊荣的代理网络、强大的数据挖掘工具和现成可用的数据集。亮数据&#xff1a;网络数据平台领航者https://www.bright.cn/?promoRESIYEAR50/?utm_sourcebrand&utm_campaignbrnd-mkt_cn_csdn_yingjie202502 在跨境电商、社…
阅读更多...
C#windows窗体人脸识别

C#windows窗体人脸识别

一、创建一个数据库&#xff0c;名为TestFaceDB 里面有一张表就OK了&#xff0c;表名Users,表里面有几个字段我说明一下&#xff1a; id--------------------bigint----------------------编号 name--------------varchar(50)-----------------用户名 phone--------------v…
阅读更多...
opencv中minAreaRect函数输出角度问题

opencv中minAreaRect函数输出角度问题

opencv中minAreaRect函数输出角度问题 新版opencv中minAreaRect函数计算最小外接矩形时&#xff0c;角度范围由旧版的[-90, 0]变为[0, 90]。 cv2.minAreaRect输入&#xff1a;四边形的四个点&#xff08;不要求顺序&#xff09;。 输出&#xff1a;最小外接矩形的中心点坐标x…
阅读更多...
Eclipse：关闭多余的工具条

Eclipse：关闭多余的工具条

Eclipse默认的工具条非常多&#xff0c;可以通过如下方法选择关闭一些不常用的&#xff1a; 1.选择菜单Window -> Perspective -> Customize Perspective 2.根据需要勾选Toolbar Visbility下面的工具条项
阅读更多...
电商小程序（源码+文档+部署+讲解）

电商小程序（源码+文档+部署+讲解）

引言 随着移动互联网的快速发展&#xff0c;电商小程序成为连接消费者与商家的重要桥梁。电商小程序通过数字化手段&#xff0c;为消费者提供了一个便捷、高效的购物平台&#xff0c;从而提升购物体验和满意度。 系统概述 电商小程序采用前后端分离的架构设计&#xff0c;服…
阅读更多...
MySQL单表存多大的数据量比较合适

MySQL单表存多大的数据量比较合适

前言 经常使用MySQL数据库的小伙伴都知道&#xff0c;当单表数据量达到一定的规模以后&#xff0c;查询性能就会显著降低。因此&#xff0c;当单表数据量过大时&#xff0c;我们往往要考虑进行分库分表。那么如何计算单表存储多大的数据量合适&#xff1f;当单表数据达到多大的…
阅读更多...
Visual Studio Code支持WSL，直接修改linux/ubuntu中的文件

Visual Studio Code支持WSL，直接修改linux/ubuntu中的文件

步骤1 开始通过 WSL 使用 VS Code | Microsoft Learn 点击远程开发扩展包。 步骤2 Remote Development - Visual Studio Marketplace 点击install&#xff0c; 允许打开Visual Studio Code。 步骤3 共有4项&#xff0c;一齐安装。 步骤4 在WSL Linux(Ubuntu)中&#xf…
阅读更多...
微服务SpringCloud Alibaba组件nacos教程【详解naocs基础使用、服务中心配置、集群配置，附有案例+示例代码】

微服务SpringCloud Alibaba组件nacos教程【详解naocs基础使用、服务中心配置、集群配置，附有案例+示例代码】

一.Nacos教程 文章目录 一.Nacos教程1.1 Nacos简介1.2 nacos基本使用直接下载打包服务源码方式启动 1.3 创建nacos客服端1.4 nacos集群配置1.5 nacos配置中心 1.1 Nacos简介 nacos是spring cloud alibaba生态中非常重要的一个组件&#xff0c;它有两个作用&#xff1a; 1:注册…
阅读更多...
2024年终总结和2025年规划

2024年终总结和2025年规划

2024年的主线是AI基础的学习和读书&#xff0c;虽然AI学习花费了更多的时间&#xff0c;但是读书长久看来于我是更重要的事情&#xff0c;哈哈哈&#xff0c;因此先简单回顾一下读书记忆&#xff0c;回顾我的2024&#xff0c;再展望一下我的2025. 我的2024年记忆 读万卷书&am…
阅读更多...
实时云渲染：驱动XR技术产业化腾飞的核心引擎

实时云渲染：驱动XR技术产业化腾飞的核心引擎

在科技飞速发展的当下&#xff0c;扩展现实&#xff08;XR&#xff09;技术正以前所未有的速度融入人们的生活与工作&#xff0c;为用户打造出沉浸式逼真的虚拟环境。据知名XR媒体XR Today的最新数据显示&#xff0c;2024年全球XR市场规模已突破500亿美元&#xff0c;预计到202…
阅读更多...
【AI编程】体验a0.dev：专为移动端app的对话式AI编程工具

【AI编程】体验a0.dev：专为移动端app的对话式AI编程工具

摘要 体验专为移动端APP开发的AI编程工具 a0.dev&#xff0c;并附上实践过程和价格说明 体验a0.dev&#xff1a;专为移动端app的对话式AI编程工具 最近在探索新的AI编程工具时&#xff0c;发现了a0.dev&#xff0c;一个专注于移动端应用开发的对话式AI编程工具。今天就和大家分…
阅读更多...
基于若依开发的工程项目管系统开源免费，用于工程项目投标、进度及成本管理的OA 办公开源系统，非常出色！

基于若依开发的工程项目管系统开源免费，用于工程项目投标、进度及成本管理的OA 办公开源系统，非常出色！

一、简介 今天给大家推荐一个基于 RuoYi-Flowable-Plus 框架二次开发的开源工程项目管理系统&#xff0c;专为工程项目的投标管理、项目进度控制、成本管理以及 OA 办公需求设计。 该项目结合了 Spring Boot、Mybatis、Vue 和 ElementUI 等技术栈&#xff0c;提供了丰富的功能…
阅读更多...
数据库数据恢复—MongoDB丢失_mdb_catalog.wt文件导致报错的数据恢复案例

数据库数据恢复—MongoDB丢失_mdb_catalog.wt文件导致报错的数据恢复案例

MongoDB数据库存储模式为文档数据存储库&#xff0c;存储方式是将文档存储在集合之中。 MongoDB数据库是开源数据库&#xff0c;同时提供具有附加功能的商业版本。 MongoDB中的数据是以键值对(key-value pairs)的形式显示的。在模式设计上&#xff0c;数据库受到的约束更少。这…
阅读更多...
小米 R3G 路由器（Pandavan）实现网络打印机功能

小米 R3G 路由器（Pandavan）实现网络打印机功能

小米 R3G 路由器&#xff08;Pandavan&#xff09;实现网络打印机功能 一、前言 家中有多台 PC 设备需要打印服务&#xff0c;但苦于家中的 Epson L380 打印机没有网络打印功能&#xff0c;并且配置 Windows 共享打印机实在是过于繁琐且需要共享机保持唤醒状态过于费电。想到…
阅读更多...
笔记8——模式匹配 match语句(仅在Python 3.10及以上版本中可用)

笔记8——模式匹配 match语句(仅在Python 3.10及以上版本中可用)

文章目录 模式匹配 match语句(仅在 Python 3.10及以上版本 中可用)基本语法基本匹配操作应用场景 模式匹配 match语句(仅在 Python 3.10及以上版本 中可用) Python 3.10 及以上版本中才引入了 match 语句用于简化复杂的条件判断和数据解构&#xff1b;类似于其他语言中的 swit…
阅读更多...
最新文章

Copyright @ 2022~2023