「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
前言
上篇文章我们已经完成了项目的搭建并熟悉了一下项目的目录结构以及基础文件。本篇文章正式进行webpack相关的配置。在此之前。我们先来对比一下。
vue-cli2 VS vue-cli4
vue-cli2版本和vue-cli4版本的项目有着很大的区别，在vue-cli2版本生成的项目中会存在大量的webpack配置文件，如根目录下面的config文件夹中的文件。其次在根目录中还会有 build、static等文件夹。项目中的index.html存放在根目录下。
在vue-cli4中则进一步简化了配置。vue-cli4项目没有 build、config等webpack配置相关的文件夹。将vue-cli2中的static文件夹更换成了public并将 项目中index.html也放在了此处。这样使得项目的目录结构变得更加清晰。
vue-cli2配置webpack
如果我们要配置vue-cli2的webpack,可以在config文件夹中配置开发环境和生产环境不同的一些变量。然后使用node.js中process.env.NODE_ENV来获取项目当前运行的环境从而实现webpack在不同环境的执行。vue-cli2配置webpack较为繁琐 因此推荐使用vue-cli4(升级到vue-cli4后是真的香)
vue-cli4配置webpack
上篇文章我们介绍了使用vue-cli4生成项目之后的目录结构 ,vue-cli4自带的默认配置也可以实现项目的打包。
在终端中执行 npm run build命令 vue-cli4就给我们进行默认配置的打包。此时在根目录默认会生成一个dist文件夹。里面有一个名为bundle.js就是我们打包之后的js文件。
当然默认配置是远远不能满足我们需求的。我们需要自定义相关的配置。要自定义配置webpack 首先需要在项目的根目录下新建一个名为:vue.conifg.js的文件。之后webpack相关的配置就都会写进这个js文件中。
我们现在进行第一步 在vue.config.js中引入 webpack包 我们并不需要进行webpack的依赖安装，在我们创建项目时 vue-cli4 自带了webpack
const webpack = required('webpack')
之后 我们打包后需要将打包的文件放在项目的具体位置。一般我们都会将打包之后的代码放到项目根目录下。所以我们还应该用到 node.js的path模块
//引入path
const path = required('path')
//定义一个方法 之后我们会经常用到
const resolve = dir => path.join(__dirname,dir)
// __dirname 是node.js path模块中定义的一个常量 表示项目的根路径
之后我们可以定义项目的运行环境 然后根据项目的运行环境来判断webpack应该执行那些配置 要想知道项目的运行环境 我们依然需要用到node.js
//定义生产环境的Boolean process.env.NODE_ENV 即node.js中获取项目环境的值。如果是开发环境且未自定义
//则一般默认值为'devlopment' 如果是生产环境且未自定义 则一般默认值为'production'
const is_pro = ['production','prod'].includes(process.env.NODE_ENV)
//定义开发环境的Boolean
const is_dev = ['devlopment','dev'].includes(process.env.NODE_ENV)
接下来我们继续定义一些常量
//productPath 定义这个常量是提供生产环境打包之后的基础路径,我们所生成的打包文件路径都会加上这个基础路径
const productPath = '/SIEMENS/AC-CSZB-20210322/QYWX'
// title 定义title即页面的标题
const title ='xxx'
做完这些之后我们就可以进行正式的配置了。
module.exports = {
//如果是生产环境则加上基础路径否则默认为根路径
publicPath: is_pro ? productPath ：'/'，
//打包后生成文件的路径 默认为 ’dist‘ 你也可以配合node.js的path自定义打包文件的生成位置
outputDir:'dist'
//设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。
assetsDir：'static'
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false
// 如果是生产环境 则使用生产环境的 source map
productionSourceMap: !IS_PROD,
chainWebpack : config =>{
//如果热更新失效 则加上此代码来修复HMR失效
config.resovle.symlinks(true)
//配置别名
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@v', resolve('src/views'))
.set('@', resolve('src'))
.set('@c', resolve('src/components'))
.set('@router', resolve('src/router'))
.set('@store', resolve('src/store'))
.set('@assets', resolve('src/assets'))
//配置moment 去除除中文包之外其他的包
config.plugin('ignore').use(
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn$/)
)
//配置打包分析 可以知道你项目那些js占用的体积比较大 一般生产环境进行分析 开发环境则不需要
//在这之前我们先引入 BundleAnalyzerPlugin插件
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
if(is_pro){
config
.plugin('webpack-report')
.use(BundleAnalyzerPlugin,[
{
analyzerMode:”static“
}
])
//配置externals 引入CDN资源 该配置大大的减少了打包之后的体积
// 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
// 首先在vue.config.js定义两个常量 baseUrl、cdn
const baseUrl = 'https://cdn.jsdelivr.net/npm/'
const cdn = {
js: [`${baseUrl}vue@2.6.11/dist/vue.min.js`,
`${baseUrl}vue-router@3.2.0/dist/vue-router.min.js`,
`${baseUrl}vuex@3.4.0/dist/vuex.min.js`,
`${baseUrl}view-design@4.0.0/dist/iview.min.js`,
`${baseUrl}jquery@3.4.1/dist/jquery.min.js`
],
css: [`${baseUrl}view-design@4.0.0/dist/styles/iview.css`]
}
//将配置传入html plugin
config.plugin('html').tap(args ={
args[0].cdn =cdn
args[0].title =title
return args
})
}，
//还未结束 此时我们还需要继续配置
configureWebpack: cof =>{
const plugin = []
//生产环境的插件
if(is_pro){
//这里也是配置externals引入 CDN资源
cof.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'view-design': 'iview',
jquery: 'jQuery'
}
}
// 添加 gzip压缩插件 减少项目打包体积 首先需要安装插件 并且引入插件
// 终端中输入 npm i compression-webpack-plugin
// vue.config.js 中引入
// const CompressionWebpackPlugin =require("compression-webpack-plugin")
//定义生产环境那些文件需要被压缩 const productionGzipExtensions = /.
(js|css|json|txt|html|ico|svg)(?.*)?$/i
plugin.push(
new CompressionWebpackPlugin(
{
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
}))
}
//通用环境插件
//添加vue环境下的jquery环境 让vue代码可以使用jquery
plugin.push(
new webpack.ProvidePlugin(
{
jQuery: 'jquery',
$: 'jquery',
'windows.jQuery': 'jquery'
})
)
//提示用户包的体积过大，以此进行性能优化 我设置为警告提醒 单个文件体积不能超过2000000字节
cof.performance = {
//提示级别
hints: 'warning',
//最大静态资源的打包体积
maxAssetSize: 2000000,
//最大入口文件的打包体积
maxEntrypointSize: 2000000,
//过滤不需要检测的文件
assetFilter (assetFilename) {
return assetFilename.endsWith('.js')
}
}
//将添加的插件都传到配置中
conf.plugins = [...config.plugins,...plugin]
//配置css
css: {
extract: IS_PROD,
sourceMap: false,
requireModuleExtension: true,
loaderOptions: {}
},
//配置开发环境相关的 可以添加proxy属性 配置跨域代理
devServer: {
//是否开启热更新
hot: true,
//本地启动地址
host: '0.0.0.0',
//本地启动端口号
port: 8080,
// 是否使用https协议
https: false,
//是否自动打开浏览器
open: false
// 配置请求代理
proxy: {
"/api": {
target:"https://www.easy-mock.com/mock/xxxxxxxxxxxxxxx", // 目标代理接口地址
secure: false,
changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
// ws: true, // 是否启用websockets
pathRewrite: {
"^/api": "/"
}
}
}
},
}
下面提供类型图片 以供参考
其实我们只使用部分的webpack 插件 还有很多很多插件我们没有使用, 插件的使用需要结合项目来进行选择。
好的。至此wepack的打包配置就完成了。
最后
文章若有不足之处，还请大家批评指出。
感谢您观看此篇文章 希望能给个👍评论收藏三连！你的点赞就是我写作的动力。
