webpack打包步骤:
1.新建一个文件夹,在vscode编译软件中,右击新建文件夹,打开终端命令。然后输入npm init初始化包名
2.然后下载npm i webpack webpack-cli -g进行全局安装
3.然后在下载npm i webpack webpack-cli -D进行本地安装
//运行指令:
//开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
//由于版本问题,新版打包环境指令改为:webpack --entry ./src/index.js -o ./build --mode=development
//生产环境:webpack ./src/index.js -o ./build/built.js --mode=production
//webpack --entry ./src/index.js -o ./build --mode=production
//结论:
//1.webpack能处理js和json文件,但不能处理css/img等其他资源
//2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
//2.生产环境比开发环境多一个压缩js的代码
// 利用ES6导入data.json文件数据
4.在新建的文件夹里面,新建src文件夹,用来存储静态资源(index.js,index.html,data.json)等文件
1.怎么打包
vue cli脚手架提供的打包命令
npm run build
将src下的文件打包,也会包括node_modules里面的三方包
2.如何测试dist包
要查看dist包的内容,需要将dist放到http服务中
http服务器:iis,nginx,apache,node服务(serve)
npm install -g serve
serve dist
3.项目部署位置
是一个单独的项目?
还是一个已有的子项目,子级域名
已经有线上项目,http://www.baidu.com
子项目:http://www.baidu.com/exam
具体实现步骤:
在vue.config.js中写
module.exports={
publicPath:'/exam',
outputDir:'dist/exam'
}
4.用户提出Bug太慢(首屏加载慢)
a.文件压缩compressionWebpackPlugin插件
cnpm i -D compression-webpack-plugin
在vue.config.js文件中配置gizp压缩
//引入CompressionWebpackPlugin压缩插件
const CompressionWebpackPlugin = require("compression-webpack-plugin");
//在module.exports对象中配置:
//配置webpack
configureWebpack:{
plugins:[
new CompressionWebpackPlugin({
algorithm:'gzip',//压缩方式
test:/\.js$|.css$/,//.js结尾和.css结尾的文件需要压缩
threshold:10240 //多大可以压缩,单位是bit 10kb
})
]
}
b.使用cdn优化,将原本从网站下载的第三方包走cdn下载
c.打包不需要将三方包打入,要排除,打包的文件就小了
具体代码:在vue.config.js中:externals排除第三方包
const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = defineConfig({
transpileDependencies: true,
//所以资源路径前缀
publicPath:'/exam',
//输出目录
outputDir:'dist/exam',
//配置webpack
configureWebpack:{
//排除第三方包
externals:{
vue:'Vue',
"element-ui":'ELEMENT' //其中ELEMENT这个名称取决于你引用cdn.js文件的全局变量
// 'element-ui': 'ElementUI',
},
plugins:[
new CompressionWebpackPlugin({
algorithm:'gzip',//压缩方式
test:/\.js$|\.css$/,//.js结尾和.css结尾的文件需要压缩
threshold:10240 //多大可以压缩,单位是bit 10kb
})
]
}
})
d.bootcdn
在public文件夹中因此cdn,vue的链接
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
e.内网:把三方文件下载到项目中
5.多环境
开发,测试,线上
不同的环境,db,账号等不同
如:请求地址的不同环境的前缀 process.env.VUE_APP_BASEURL来获取基础路径
在package.json中的script中配置test
"scripts": {
"serve": "vue-cli-service serve", //默认对应development
"build": "vue-cli-service build", //默认对应production
"build-test": "vue-cli-service build --mode test", //自定义的test test名字在。env.test中来的
"lint": "vue-cli-service lint"
},
6.代码拆分
需要将大的代码模块拆分成多个小的,便于压缩传输
在vue.config.js中配置chainWebpack来做代码拆分的
const path =require('path')
module.exports = defineConfig({
lintOnSave:false,
transpileDependencies: true,
//所以资源路径前缀
publicPath:'/exam',
//输出目录
outputDir:'dist/exam',
//代码拆分
chainWebpack:config=>{
config.when(process.env.NODE_ENV==="production",
config => {
config.optimization.splitChunks({
chunks:'all', //同步代码同时执行,async,inital
minSize:1000, //大约30kb需要拆分
cacheGroups:{
//提取三方包
vendors:{
name:'chunk-vendors',
test:/[\\/]node_modules[\\/]/,
priority:-10, //值越大,优先级越高
chunks:'initial'
},
//提取组件包
commons:{
name:'chunk-commons',
test: path.resolve('src/components'),
priority:-9,
reuseExistingChunk:true //如果有提取的chunk,则不在提取了
}
},
})
}
)
}
})