webpack构建vue项目基础05 之引入第三方库与代码切片、lodash

01：webpack构建vue项目基础05 之引入第三方库lodash 与切片

package.json

  "dependencies": {
    "lodash": "^4.17.11"
  },
1
2
3

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
        }
      }
    },
  },
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19