这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前段时间,对部门的个别项目进行Vue3.0+ts框架的迁移,刚开始研究的时候也是踩坑特别多,尤其我们的项目还有些特殊的webpack配置,所以,研究vue.config.js的配置的时候也是查阅了各种资料文档,最终,完成了项目webpack的特殊配置。

今天分享一下,我们项目当中的一些webpack配置,希望能给大家有所启发;只要配置多了,你就会发现其实所有的配置的都是相似的,尤其像插件的配置,都是十分相似的。

我们现在开始进入今天的主题啦~~

1 介绍

之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。

此刻,你需要创建vue.config.js文件。

查看默认的webpack配置

Vue CLI 官方文档:vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令,这个命令只是简单的把 vue-cli-service``inspect 代理到了你的项目中。

被抽象化的webpack,我们要想去理解它默认的一些配置的话是比较困难的,所以我们可以通过指令去查看。

该指令会将webpack的配置输出到output.js文件,这样方便去查看。

vue inspect > output.js

vue.config.js文件

这个文件导出了一个包含了选项的对象:

module.exports = {
// 选项...
}

接下来,详细介绍一些选项及配置:

2 基本配置

module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 8090,
host: '0.0.0.0',
https: false,
open: true
},
// 其他配置
...
  • productionSourceMap:生产环境是否要生成 sourceMap

  • publicPath:部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致

    • 可以通过三元运算去配置devprod环境, publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'
  • outputDirbuild 时输出的文件目录

  • assetsDir: 放置静态文件夹目录

  • devServer: dev环境下,webpack-dev-server 相关配置

    • port: 开发运行时的端口
    • host: 开发运行时域名,设置成'0.0.0.0',在同一个局域网下,如果你的项目在运行,同时可以通过你的http://ip:port/...访问你的项目
    • https: 是否启用 https
    • opennpm run serve 时是否直接打开浏览器

3 插件及规则的配置

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

configureWebpack 方式

configureWebpack 是相对比较简单的一种方式

  • 它可以是一个对象:和 webpack 本身配置方式是一致,该对象将会被 webpack-merge 合并入最终的 webpack 配置
  • 它也可以是一个函数:直接在函数内部进行修改配置
configureWebpack: {
rules:[],
plugins: []
}
configureWebpack: (config) => {
// 例如,通过判断运行环境,设置mode
config.mode = 'production'
}

chainWebpack 方式

chainWebpack 链式操作 (高级),接下来所有的配置我都会在该选项中进行配置

4 规则rules的配置

关于rules 的配置,我会分别从新增/修改进行介绍。

4.1 rules的新增

webpack中 rules 是 module 的配置项,而所有的配置的都是挂载到 config 下的,所以新增一个rule方式:

config.module
.rule(name)
.use(name)
.loader(loader)
.options(options)
案例:style-resources-loader 来添加less全局变量
案例:svg-sprite-loader 将svg图片以雪碧图的方式在项目中加载
module.exports = {
chainWebpack: (config) => {
// 通过 style-resources-loader 来添加less全局变量
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './lessVariates.less')]
});
}); // `svg-sprite-loader`: 将svg图片以雪碧图的方式在项目中加载
config.module
.rule('svg')
.test(/.svg$/) // 匹配svg文件
.include.add(resolve('src/svg')) // 主要匹配src/svg
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader') // 使用的loader,主要要npm该插件
.options({symbolId: 'svg-[name]'}) // 参数配置
}
}

4.2 rules的修改

针对已经存在的 rule , 如果需要修改它的参数, 可以使用 tap 方法:

config.module
.rule(name)
.use(name)
.tap(options => newOptions)
案例:修改url-loader的参数
module.exports = {
chainWebpack: (config) => {
// `url-loader`是webpack默认已经配置的,现在我们来修改它的参数
config.module.rule('images')
.use('url-loader')
.tap(options => ({
name: './assets/images/[name].[ext]',
quality: 85,
limit: 0,
esModule: false,
}))
}
}

5 插件plugins 的配置

关于 plugins 的配置,我会分别从新增/修改/删除进行介绍。

5.1 plugins的新增

  • 注意:这里WebpackPlugin不需要通过new WebpackPlugin()使用。
config
.plugin(name)
.use(WebpackPlugin, args)
案例:新增hot-hash-webpack-plugin
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
chainWebpack: (config) => {
// 新增一个`hot-hash-webpack-plugin`
// 注意:这里use的时候不需要使用`new HotHashWebpackPlugin()`
config.plugin('hotHash')
.use(HotHashWebpackPlugin, [{ version: '1.0.0' }]);
}
}

5.2 plugins的修改

同理, plugin 参数的修改也是通过 tap 去修改。

config
.plugin(name)
.tap(args => newArgs)
案例:修改打包后css抽离后的filename及抽离所属目录
案例:删除consoledebugger
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
chainWebpack: (config) => {
// 修改打包时css抽离后的filename及抽离所属目录
config.plugin('extract-css')
.tap(args => [{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}]); // 正式环境下,删除console和debugger
config.optimization
.minimize(true)
.minimizer('terser')
.tap(args => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
}
}

5.3 plugins的删除

对于一些webpack默认的 plugin ,如果不需要可以进行删除

config.plugins.delete(name)
案例:删除 vue-cli3.X 模块的自动分割抽离
module.exports = {
chainWebpack: (config) => {
// vue-cli3.X 会自动进行模块分割抽离,如果不需要进行分割,可以手动删除
config.optimization.delete('splitChunks'); }
}

6 一些常见的配置

6.1 修改enter文件

webpack 默认的 entry 入口是 scr/main.ts

config.entryPoints.clear(); // 清空默认入口
config.entry('test').add(getPath('./test/main.ts')); // 重新设置

6.2 DefinePlugin

定义全局全局变量,DefinePlugin 是 webpack 已经默认配置的,我们可以对参数进行修改

config.plugin('define').tap(args => [{
...args,
"window.isDefine": JSON.stringify(true),
}]);

6.3 自定义filename 及 chunkFilename

自定义打包后js文件的路径及文件名字

config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');

6.4 修改html-webpack-plugin参数

html-webpack-plugin 是 webpack 已经默认配置的,默认的源模版文件是 public/index.html ;我们可以对其参数进行修改

 config.plugin('html')
.tap(options => [{
template: '../../index.html' // 修改源模版文件
title: 'test',
}]);

6.5 设置别名alias

webpack默认是将src的别名设置为@, 此外,我们可以进行添加

config.resolve.alias
.set('@', resolve('src'))
.set('api', resolve('src/apis'))
.set('common', resolve('src/common'))

7 附上一份我的vue.config.js的配置

const path = require('path');
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
const WebpackBar = require('webpackbar');
const resolve = (dir) => path.join(__dirname, '.', dir); module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 9999,
host: '0.0.0.0',
https: false,
open: true
}, chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './lessVariates.less')]
});
}); config.resolve.alias
.set('@', resolve('src'))
.set('api', resolve('src/apis'))
.set('common', resolve('src/common')) config.module.rule('images').use('url-loader')
.tap(options => ({
name: './assets/images/[name].[ext]',
quality: 85,
limit: 0,
esModule: false,
})); config.module.rule('svg')
.test(/.svg$/)
.include.add(resolve('src/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader'); config.plugin('define').tap(args => [{
...args,
"window.isDefine": JSON.stringify(true)
}]); // 生产环境配置
if (process.env.NODE_ENV === 'production') {
config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');
config.plugin('extract-css').tap(args => [{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}]);
config.plugin('hotHash').use(HotHashWebpackPlugin, [{ version : '1.0.0'}]);
config.plugin('webpackBar').use(WebpackBar); config.optimization.minimize(true)
.minimizer('terser')
.tap(args => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
config.optimization.splitChunks({
cacheGroups: {
common: {
name: 'common',
chunks: 'all',
minSize: 1,
minChunks: 2,
priority: 1
},
vendor: {
name: 'chunk-libs',
chunks: 'all',
test: /[\/]node_modules[\/]/,
priority: 10
}
}
});
}
}
}

本文转载于:

https://juejin.cn/post/7130784786343428110

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--vue.config.js 的完整配置(超详细)!的更多相关文章

  1. 关于vue.config.js 的 proxy 配置

    关于vue.config.js 的 proxy 配置有的同学不怎么明白项目里面有的配置了 pathRewrite 地址重写,有的又没有进行配置?/* * proxy代理配置的说明 * *接口例子:/z ...

  2. vue.config.js的常用配置

    const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...

  3. vue-cli 3.x搭建项目以及其中vue.config.js文件的配置

    参考链接:https://www.cnblogs.com/wxh0929/p/11271551.html vue-cli3全面配置详解:https://www.jb51.net/article/150 ...

  4. 关于 vue.config.js 文件的配置

    相关文档: https://cli.vuejs.org/zh/config/#vue-config-js

  5. vue.config.js常用配置

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...

  6. Vue Cli 3:vue.config.js配置文件

    Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...

  7. Vue项目搭建常用的配置文件,request.js和vue.config.js

    request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...

  8. vue3.0 vue.config.js 配置实战

    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...

  9. Vue.config.js配置 最新可用版本

    最近 在学前端,然后,学了这个vue-cli脚手架,虽然,我这个vue-cli还不算入门,后我会把这个笔记补上 下面是我的Vue.config.js的配置,我感觉这个复用的程度高,所以记下 了这个随笔 ...

  10. vue cli3.3 以上版本配置vue.config.js

    // vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只 ...

随机推荐

  1. 2023 CSP-J/S游记

    8.14 打了场 luogu 的 \(SCP\) ,给打没信心了. 8.16 普及模拟1 8.19 普及模拟2 8.22 普及模拟3 9.5 二调讲评结束后,和班主任说了考 \(CSP\) 的事情,就 ...

  2. 【LGR-154-Div.4】洛谷入门赛 #15

    [LGR-154-Div.4]洛谷入门赛 #15 \(A\) luoguB3813 [语言月赛 202308]四个人的排名加起来没有小粉兔高 AC 水题. #include<bits/stdc+ ...

  3. NC235247 Sramoc问题

    题目链接 题目 题目描述 \(Sramoc(K ,M)\) 表示用数字 \(0,1,2,3,4,...,k-1\) 组成的自然数中能被M整除的最小数.给定 \(K,M\) \(2\leq K\leq ...

  4. 【Lua】Lua基础语法

    1 Lua 简介 ​ Lua 是一个小巧的脚本语言,用标准C语言编写而成,由巴西里约热内卢天主教大学的 Roberto Ierusalimschy.Waldemar Celes 和 Luiz Henr ...

  5. Laravel入坑指南(12)——最终章:Session、缓存与Redis

    因为web服务除了业务准确之外,我们最关注的就是服务的性能.鉴于web服务几乎都是IO密集型,我们为了提高IO的速度,自然不能把所有的数据都放在关系型数据库中.而redis的并发与性能可以很好地帮我们 ...

  6. 使用 CMake 编写 Windows 静态库

    最近有一个多个 .h .cc .cpp 编译成静态库的需求,故记录下过程 静态库不同于动态库,它不需要 main 入口,只要各个源文件与头文件能对应,也就是源文件和头文件引用的头文件能够找到函数的符号 ...

  7. Direct2D 几何篇

    微软文档:Geometries overview 本篇通过官方文档学习,整理出来的demo,初始样本请先创建一个普通的desktop app. // Test_Direct2D_Brush.cpp : ...

  8. helloShell

    初识SHELL 变量 常规的变量赋值不必多说,shell脚本还可以从命令输出中提取信息,赋值给变量 反引号字符 testing= `date` $( )格式 testing=$(date) #!/bi ...

  9. Go语言实现记账本

    使用面向过程思想实现 package main import ( "fmt" ) func main(){ key := "" //设置初始金额 sum := ...

  10. 【Azure Logic App】添加 Storage Account 来提升 Logic App 的性能

    文章原文:https://techcommunity.microsoft.com/t5/azure-integration-services-blog/scaling-logic-app-standa ...