//这里如果写的不对,dist/index打开会报xx未定义,
// 模块名称和作用域名(对应的是window里面的全局变量名)
// 模块名称和作用域名一定要写对,不然不是报未定义就是打包cdn引入不进去 !!!
vue: ‘Vue’,
“element-ui”: “element”,
‘vue-router’: ‘VueRouter’,
axios: ‘axios’,
lodash: ‘_’,
echarts: ‘echarts’,
nprogress: ‘NProgress’,
‘vue-quill-editor’: ‘VueQuillEditor’,
}
// CDN外链,会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
// element在vue下,顺序不对也会报错
css: [
“https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css”,
‘https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css’,
‘https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css’,
‘https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css’,
‘https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css’,
],
js: [
“https://cdn.staticfile.org/vue/2.5.22/vue.min.js”,
“https://cdn.staticfile.org/element-ui/2.8.2/index.js”,
“https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js”,
“https://cdn.staticfile.org/axios/0.18.0/axios.min.js”,
“https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js”,
“https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js”,
“https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js”,
“https://cdn.staticfile.org/quill/1.3.4/quill.min.js”,
“https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js”,
]
}
}
module.exports = {
// 1
publicPath: ‘./’, // 静态资源路径(默认/,打包后会白屏)
// 2
productionSourceMap: false, //错误映射,关闭会减少一半体积
devServer: {
hotOnly: true, // 热更新
open: true
},
// 4 添加别名
chainWebpack: config => {
config.resolve.alias
.set(‘@’, resolve(‘src’))
.set(‘assets’, resolve(‘src/assets’))
.set(‘api’, resolve(‘src/api’))
.set(‘views’, resolve(‘src/views’))
.set(‘components’, resolve(‘src/components’))
// 10 添加CDN参数到htmlWebpackPlugin配置中
// 11 在pubilc/index 中配置 我放在最下面了
// 12 cnpm i compression-webpack-plugin -D 对资源文件进行压缩
config.plugin(‘html’).tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
// 16 配置图片压缩
config.module
.rule(‘images’)
.use(‘image-webpack-loader’)
.loader(‘image-webpack-loader’)
.options({
bypassOnDebug: true
})
.end()
},
// 7 使用去除log
configureWebpack: config => {
const plugins = [];
if (isProduction) {
// 9 配置cdn
config.externals = externals
// 配置cdn
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: [‘console.log’] //移除console
}
}
}),
// 14 对资源文件进行压缩引入进行配置:
new CompressionWebpackPlugin({
filename: ‘[path].gz[query]’,
algorithm: ‘gzip’,
// test: /.js ∣ h ˙ t m l |\.html ∣h˙tml|.json$|.css/,
test: /.js ∣ j ˙ s o n |\.json ∣j˙son|.css/,
threshold: 10240, // 只有大小大于该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
// deleteOriginalAssets: true // 删除原文件
})
// 15 安装图片压缩 cnpm install image-webpack-loader --save-dev 容易安装不上
// 若安装过 image-webpack-loader 先卸载 !!!
// npm 安装的npm 则npm 移除
// npm uninstall image - webpack - loader
//如果yarn安装的,则yarn 移除
// yarn remove image - webpack - loader
),
// 17公共代码抽离
config.optimization = {
splitChunks: { // 分割代码块
cacheGroups: {
vendor: { //第三方库抽离
chunks: ‘all’,
test: /node_modules/,
name: ‘vendor’,
minChunks: 1, //在分割之前,这个代码块最小应该被引用的次数
maxInitialRequests: 5,
minSize: 0, //大于0个字节
priority: 100 //权重
},
common: { //公用模块抽离
chunks: ‘all’,
test: /[\/]src[\/]js[\/]/,
name: ‘common’,
minChunks: 2, // 在分割之前, 这个代码块最小应该被引用的次数
maxInitialRequests: 5,
minSize: 0, //大于0个字节
priority: 60
},
styles: { //样式抽离
name: ‘styles’,
test: /.(sa|sc|c)ss$/,
chunks: ‘all’,
enforce: true
},
runtimeChunk: {
name: ‘manifest’
}
}
}
}
}
},
}
重要!!! 将以上代码赋值到 vue.config.js文件中,根据自己的项目去配置cdn
图例:
可以根据自己项目所需的cdn链接自己搜索配置 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
本项目所需的cdn
cdn配置好后,在public/index.html添加如下代码
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<% } %>
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
需要配置环境变量,上线网址,运行npm run build 就是生产环境上线环境了,所以需要配置上线的网址, 下面第三张图
配置环境变量: 参考Vue配置多环境变量,原来是这么回事啊_活在风浪里的博客-CSDN博客https://blog.csdn.net/m0_57904695/article/details/122269218
可以通过在build后加上 --report查看打包报告
// package.json
“scripts”: {
“serve”: “vue-cli-service serve --open”,
“build”: “vue-cli-service build --report”
},
到现在已经配置好了,我们在重新运行打包命令,查看dist文件大小
打包完成后要这个打包报告就没用了可以删除掉,
项目上线
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
系的自学效果低效漫长且无助。**
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-blUJGJCb-1715250775223)]
[外链图片转存中…(img-BYLMyG2N-1715250775223)]
[外链图片转存中…(img-82GuZBZQ-1715250775223)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!