webpack、vue.config.js

Mr.Meng_952023-09-22 18:50

一、webpack学习

简述

webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle

为什么需要打包工具

随着现在前端技术的发展，我们会使用各种框架（Vue、React），ES6模块化语法、Less/Sass等css预处理器，去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的，需要使用一些打包工具去将代码进行编译，将其编译成浏览器可以运行的js、css等语法，才能运行。

此外，使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。

常用打包工具

  • Gulp
  • Webpack
  • Vite
  • ...

功能

webpack有两种开发模式，这两种开发模式的功能是有限的：

  • 开发模式：只能编译js中的ES Module模块语法
  • 生产模式：能编译js的ES Module模块语法和压缩js代码。所以要使用webpack去实现打包其他资源我们就需借助一些工具来实现。

Webpack五大核心模块

  • entry：入口
    指明了需要打包文件的入口，让webpack知道从按个文件开始打包
  • output： 输出
    指明了打包的文件要输出到哪里去，并且如何命名等
  • laoder：加载器
    由于webpack本身的功能很少，只能解析js、json等资源，所以在处于其他资源的时候就需要借助loader，webpack才能解析
  • plugins：插件
    就好比浏览器的插件一样，可以扩展webpack的功能，我们需要下载并且引用它
  • mode：模式
    生产模式：production
    开发模式：deveplopment

以上内容来自：

Webpack基础篇(-)--入门

详细讲解

一、入口 entry

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

webpack.config.js

cpp 复制代码 
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

也可以简写为：

cpp 复制代码 
module.exports = {
  entry: './path/to/my/entry/file.js',
};

在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时，我们就可以将一个文件路径数组传递给 entry 属性

webpack.config.js

cpp 复制代码 
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

二、输出output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在./dist文件夹中。

webpack.config.js

js 复制代码 
const path = require('path')

module.exports = {
	entry: './path/to/my/entry/file.js',
	output: {
		path: path.resolve(__dirname,'dist),
		filename: 'my-first-webpack.bundle.js'
	}
}

上面示例，分别通过output.path和output.filename属性来设置文件输出位置以及输出文件的名称。

三、loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

  • test 属性，识别出哪些文件会被转换。
  • use属性，定义出在进行转换时，应该使用哪个loader

注：loader是在module下的rules属性下进行配置

webpack.confis.js

js 复制代码 
const path = require('path')

module.exports = {
	entry: '',
	output: {
		path: '',
		filename: ''
	},
	module: {
		rules: [{
			test: '/\.txt$/',
			use: 'raw-loader'
		}],
	},
}

以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。这告诉webpack编译器，当遇到require或者import语句中被解析为 '.txt'的路径时，在对它进行打包前，先use（使用）raw-loader转换一下。

示例一

使用loader告诉webpack加载css文件，或者将TypeScript转为JavaScript。为此首先安装相对应的loader。

js 复制代码 
npm install --save-dev css-loader ts-loader

然后指示webpack对每个.css使用css-loader，以及对所有的.ts文件使用ts-loader

webpack.config.js

js 复制代码 
module.exports = {
	module: {
		relus: [
			{test: /\.css$/,use: 'css-loader'},
			{test: /\.ts$/,use: 'ts-loader'},
		]
	}
}

示例二

module.rules允许你在webpack配置中指定多个loader。loader从左到右（或从下到上）的取值执行。在下面示例中，从sass-loader开始执行，将scss/sass文件编译成普通的css文件，然后继续执行css-loader，css-loader会对css文件进行解析处理，最后执行style-loader，style-loader会将css样式嵌入到html中。

js 复制代码 
module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					{loader: 'style-loader'},
					{
						loader: 'css-loader',
						option: {
							modules: true // modules: true选项意味着它会将CSS类名转换为唯一的哈希值，这样可以避免在项目中的CSS样式冲突。
						}
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	}
}

四、插件plugin

loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，只需要require()它，然后把它添加到plugin数组中，多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同目的的而多次使用同一个插件，这时要通过new操作符来创建一个插件实例。

webpack.config.js

js 复制代码 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。

ProgressPlugin 用于自定义编译过程中的进度报告，HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

五、模式mode

通过选择development，production或none之中的一个，来设置mode参数，你可以启用webpack内置在相应环境下的优化，其默认值为production

js 复制代码 
module.exports = {
	mode: 'production'
}

二、关于vue.config.js

简述

vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它就会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵守JSON的格式来写。

这个文件应该导出一个包含了选项的对象：

vue.config.js

js 复制代码 
module.exports = {
	// 选项
}

vue.config.js

或者，也可以使用@vue/cli-service提供的defineConfig帮手函数，以获得更好的类型提示：

js 复制代码 
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
	// 选项
})

vue.config.js的配置项

publicPath

  • 部署时的基本 URL

  • 类型：string

  • 默认值："/"

  • 用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

  • 默认情况下，vue-cli 会假设你的应用是被部署在一个域名的根路径上，例如https://www.baidu.com/。如果部署在一个子路径上，你就需要用这个选项指定这个子路径。例如你要部署在https://www.baidu.com/other/则设置publicPath为/other/。

  • publicPath这个值也可以设置为（' '）或是相对路径（' ./ '）,这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

vue.config.js

js 复制代码 
// 这个值在开发环境下同样生效

module.exports = {
	publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

outputDir

  • 打包后生成的文件夹目录

  • 类型： string

  • 默认值：dist

  • 当运行vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除（构建时传入--no-clean可关闭该行为）

assetsDir

  • 放置生成的静态资源的目录

  • 类型：string

  • 默认值：''

  • 放置生成的静态资源（js、css、img、fonts）的（相对于outputDir的）目录

indexPath

  • 生成的index.html的输出路径

  • 类型：string

  • 默认值： index.html

  • 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

finenameHashing

  • 文件名是否包含哈希

  • 类型：string

  • 默认值：true

  • 默认情况下，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。然而，这也要求index的html是被vue cli自动生成的。如果你无法使用vue cli生成index html，你可以通过将这个选项设为false来关闭文件名哈希。

productionSourceMap

  • 类型：boolean
  • 默认值：true
  • 如果你不需要生产环境的source map，可以将其设置为false以加速生产环境构建。

pages

  • 类型：object
  • 默认值： undefind
  • 在multi-page模式下构建应用，每个page应该有一个对应的JavaScript入口文件。其值应该是一个对象，对象的key是入口的名字，value是：
  • 一个指定了entry、template、filename、title和chunks的对象（除了entry之外都是可选的）；
  • 或一个指定其entry的字符串

vue.config.js

js 复制代码 
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

css相关配置

  • Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

1、引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。

2、预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

js 复制代码 
// Sass
npm install -D sass-loader sass

// Less
npm install -D less-loader less

// Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：

vue 复制代码 
<style lang="scss">
	$color: red;
</style>

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin......)，你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：

js 复制代码 
// vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}

PostCSS

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

CSS Modules

如果你希望自定义生成的 CSS Modules 模块的类名，可以通过 vue.config.js 中的 css.loaderOptions.css 选项来实现。所有的 css-loader 选项在这里都是支持的，例如 localIdentName 和 camelCase：

js 复制代码 
// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。
        // Vue CLI v3 用户可参考 css-loader v1 文档
        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
        modules: {
          localIdentName: '[name]-[hash]'
        },
        localsConvention: 'camelCaseOnly'
      }
    }
  }
}

或

js 复制代码 
css: {
    extract: {
      // 打包后css文件名称添加时间戳
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`
    },
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px',
          'layout-color': '#9867f7'
        },
        javascriptEnabled: true
      }
    }
  },

向预处理器 Loader 传递选项

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：

js 复制代码 
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

devServer

  • 类型：Object
  • 所有webpack-dev-server的选项都支持，注意：
  • 有些值像host、port和https可能会被命令行参数覆写
  • 有些值像publicPath和historyApiFallback不应该被改写，因为它们需要和开发服务器的publicpath同步以保障正常的工作。

devServer.proxy

  • dev环境下，webpack-dev-server相关配置

  • 类型：string/Object

  • 如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。

devServer.proxy可以是一个指向开发环境API服务器的字符串

js 复制代码 
module.exports = {
	devServer: {
		proxy: 'http://localhost:4000'
	}
}

module.exports = {
	devServer: {
		proxy: {
			port: 8090,
			host: '0.0.0.0',
			https: false,
			open: true,
		}
	}
}
  • port：开发运行时的端口
  • host：开发运行时域名，设置成 0.0.0.0 ，在同一个局域网下，如果你的项目在运行，同时可以通过你的 http://ip:port/...访问你的项目
  • https：是否启用https
  • open：npm run serve 时是否直接打开浏览器

这会告诉开发服务器将任何未知请求（没有匹配到静态文件的请求）代理到http://localhost:4000

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

js 复制代码 
module.exports = {
// 反向代理
  devServer: {
    index: '/login.html',   // 默认打开文件
    open: true,             // 自动打开浏览器
    host: 'localhost',      // 默认打开域名
    port: 8080,             // 默认打开端口号
    https: false,           // 开启关闭https请求
    hotOnly: false,         // 热更
 
    proxy: {
      // 配置跨域
      '/api': {
        target: 'http://dev.aabb.cn:8082/', // 代理地址，这里设置的地址会代替axios中设置的baseURL
        ws: true,    // proxy websockets
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {      // pathRewrite方法重写url
          '^/api': '/',
        },
      },
    },
  },
}

示例

vue.config.js

js 复制代码 
module.exports = {
    publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      host: "localhost", // 域名
      https: false, // 是否开启https
      open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
    },
    lintOnSave: false,  // 取消lint语法检测，此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录，基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包，加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;	//生产环境去掉console.log
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};

插件及规则的配置

在vue.config.js，如果要新增/修改webpack的plugins或者rules，有两种方式。

configgureWebpack方式

  • configgureWebpack 是相对比较简单的一种方式
  • 它可以是一个对象：和webpack本身配置方式一致，该对象将会被webpack-merge 合并入最终的webpack配置
  • 它也可以是一个函数：直接在函数内部进行修改配置
js 复制代码 
module.exports = {
  configureWebpack: {
    rules: [],
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

configureWebpack: (config) => {
	// 例如，通过判断运行环境，设置mode
	config.mode = 'production'
}

chainWebpack方式

  • chainWebpack是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  • chainWebpack 链式操作（高级），接下来所有的配置都会在该选项中进行配置。

三、webpack-chain的使用

简述

  • 通过链式的方式修改webpack的配置

使用

entry 和 output

js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.entryPoints.clear() // 把默认的入口清空
		config.entry('entry1').add('./src/index1.tsx') // 新增入口
		config.entry('entry2').add('./src/index2.tsx') // 新增文件
		config.output
			.path("dist")
			.filename("[name].[chunkhash].js")
			.chunkFilename("chunks/[name].[chunkhash].js")
			.libraryTarget("umd")
	}
}

alias

  • 对于路径别名的配置，配置如下：
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.resolve.alias
	    .set('assets',resolve('src/assets'))
	    .set('components',resolve('src/components'))
	    .set('static',resolve('src/static'))
	    .delete('static') // 删掉指定的别名
	}
}

loader

1、添加一个loader
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.module
		.rule(name)
		.use(name)
		.loader(loader)
		.option(option)
	}
}

示例

js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.module
		.rules('ts')
		.test(/\.tsx?/)
		.use('ts-loader')
		.loader('ts-loader')
		.option({
			transpileOnly: true
		})
		.end()
	}
}
2、修改loader参数
  • 可通过tap方法修改loader的参数：
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.module
		.rule('ts')
		.test(/\.tsx?/)
		.use('ts-loader')
		.loader('ts-loader')
		.tap(option => {
			// do some ...
			return option
		})
		.end()
	}
}

在所有的配置完成之后，可以通过调用config.toConfig()来拿到最后的配置对象，可以直接作为webpack的配置。

3、移除一个loader
  • 通过uses对象的delete方法，根据loader的name删除
js 复制代码 
module.exports = {
	chainwebpack: config => {
		config.module
		.rule('ts')
		.test(/\.tsx?/)
		.uses.delete('ts-loader')
	}
}

plaugin

1、添加一个插件
  • 先指定名字（这个名字是自定义的），然后通过 use 添加插件
  • use的第一个参数是插件名称，第二个参数是插件参数，这个参数必须是一个数组，也可以不传。
js 复制代码 
// vue.config.js

module.exports = {
	chainWebpack: config => {
		config
			.plugin(name)
			.use(WebpackPlugin, args)
	}
}

示例

js 复制代码 
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	chainWebpack: config => {
		config
		.plugin('extract')
		.use(ExtractTextPlugin, [{
			filename: 'build.min.css',
			allChunks: true,
		}])
	}
}
2、移除插件
  • 添加插件时我们自定义了一个插件name，移除插件就是通过这个name来进行实现的
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config.plugins.delete('extract')
	}
}
3、指定插件在xx插件之前/之后凋用

例如，现在需要指定 html-webpack-plugin 这个插件在刚刚写的 extract 插件之前执行，则写法如下：

js 复制代码 
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	chainWebpack: config => {
		config
		.plugin('html')
		.use(htmlWebpackPlugin)
		.before('extract')
	}
}

通过 before 方法，传入另一个插件的 name 即可，表示在另一个插件之前执行。

同样，如果需要在 extract 插件之后执行，调用 after 方法

js 复制代码 
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	chainWebpack: config => {
		config
		.plugin('html')
		.use(htmlWebpackPlugin)
		.after('extract')
	}
}
4、动态修改插件参数
  • 我们可以用 webpack-chain 来动态修改插件的传参，举例如下：
  • 使用tap方法修改参数
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config
		.plugin(name)
		.use(webpackPluginName)
		.tap(args => newArgs)
	}
}
5、修改插件初始化过程
  • 我们可以自定义插件的实例化的过程，比如下面这样
  • 通过init方法，返回一个实例，这将代替原有的实例化过程
js 复制代码 
module.exports = {
	chainWebpack: config => {
		config
		.plugin(name)
		.init((Plugin, args) => new Plugin(...args));
	}
}
相关推荐
J总裁的小芒果1 分钟前
THREE.js 入门（六） 纹理、uv坐标
开发语言·javascript·uv
m0_548514772 分钟前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
Calm5505 分钟前
Vue3：uv-upload图片上传
前端·vue.js
浮游本尊10 分钟前
Nginx配置：如何在一个域名下运行两个网站
前端·javascript
新中地GIS开发老师18 分钟前
《Vue进阶教程》（12）ref的实现详细教程
前端·javascript·vue.js·arcgis·前端框架·地理信息科学·地信
漫天转悠18 分钟前
Vue3中404页面捕获（图文详情）
vue.js
Cachel wood1 小时前
Django REST framework (DRF)中的api_view和APIView权限控制
javascript·vue.js·后端·python·ui·django·前端框架
Domain-zhuo1 小时前
如何提高webpack的构建速度？
前端·webpack·前端框架·node.js·ecmascript
放逐者-保持本心，方可放逐2 小时前
SSE 流式场景应用 及 方案总结
javascript·axios·fetch·eventsource
白云~️2 小时前
uniappX 移动端单行/多行文字隐藏显示省略号
开发语言·前端·javascript
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）