目录
01:webpack构建vue项目 基础05 之引入第三方库lodash 与 切片
package.json
"dependencies": {
"lodash": "^4.17.11"
},
webpack.config.js
- 配置 optimization 下的 splitChunks 进行代码切片
module.exports = {
// webpack执行打包的唯一入口
entry: {
main: [path.resolve(__dirname, './src/main.js')],
},
// 打包的输入
output: {
publicPath: './', // js 引用的路径或者 CDN 地址
// 将所有依赖的模块合并输出到main_xxxxxx.js,xxxxxx为随机生成的6位hash码
//当内容有改变时,hash会变化,防止缓存原因导致修改不更新
filename: 'js/[name]_[contenthash:6].js',
// 输出文件的存放路径, 必须是绝对路径
path: path.resolve(__dirname, "./dist")
},
// 代码切片相关
optimization: {
// 代码切片 分割 打包后分割为多个 .js文件
splitChunks: {
chunks: 'all',
// 打包后的效果
// js/lodash_950848.js 71.1 KiB 0 [emitted] lodash
// js/main_63de8b.js 1.78 KiB 1 [emitted] main
// js/vendors~main_2938f3.js 112 KiB 2 [emitted] vendors~main
cacheGroups: {
lodash: {
name: 'lodash',
test: /[\\/]node_modules[\\/]lodash[\\/]/,
priority: 5 // 优先级要大于 vendors 不然会被打包进 vendors
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10 // 打包node_modules
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
},
}
mian.js
// 全局引入
import '@babel/polyfill'
console.log("main");
import {
age
} from "./person"
console.log("age", age);
let a = 10;
console.log("a", a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set]) // res, Set(3) {1, 2, 3} ; set-arr (3) [1, 2, 3]
import "./css/main.css"
import "./css/index.scss"
import {
add
} from "./utils/index"
console.log("add", add(2, 2)); // add 4
import _ from "lodash"
console.log("使用lodash", _.add(22, 33)); // 使用lodash 55
npm run build 效果