vue: p24 项目打包相关配置:webpack.config.js 配置和 package.json
1.打包配置package.json
"scripts": {
"dev": "webpack serve", //冒号前可随意命名,冒号后必须固定
"build": "webpack --mode production" //【1】build可随便命名,直接用webpack也可成功打包,但不会压缩优化
}
- webpack模式:main.js有354kb,时间相对短些
- webpack --mode production 模式:main.js只有94kb,命令会覆盖webpack.config中的mode,时间也会更长
- 输出位置和文件名与webpack.config中的output相关
完成后即可直接运行打包命令 npm run build
2.打包相关webpack.config.js中mode的解释
// 使用 Node.js 中的导出语法,向外导出一个 webpack 的配置对象
module.exports = {
// 【1】mode 代表 webpack 运行的模式,可选值有两个 development 和 production
// 结论:开发时候一定要用 development,因为追求的是打包的速度,而不是体积;
// 反过来,发布上线的时候一定能要用 production,因为上线追求的是体积小,而不是打包速度快!
// 正常直接用development,只要在package.json中配置覆盖此处即可
mode: 'development',
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'./dist/'),//输出目录
filename:'js/main.js' //输出文件名及目录 js文件全部输出到js目录内
},
打包成功示例
PS G:\Demo\vue\demo1> npm run build
> demo1@1.0.0 build
> webpack --mode production
assets by status 54.7 KiB [cached] 1 asset
asset js/main.js 93.2 KiB [emitted] [minimized] (name: main) 1 related asset
asset ./index.html 487 bytes [emitted]
runtime modules 1.72 KiB 5 modules
orphan modules 2.38 KiB [orphan] 3 modules
cacheable modules 319 KiB
modules by path ./node_modules/ 315 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.44 KiB [built] [code generated]
+ 5 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 307 KiB [built] [code generated]
modules by path ./src/ 3.84 KiB
./src/index.js + 3 modules 2.85 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/index.css 537 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/index.less 474 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 11027 ms
分类:
Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现