Webpack CommonsChunk 公共代码提取

  • easywebpack 4.10.0 开始,底层通过 optimization 实现公共提取,支持公共 jscss 提取, 提取的公共 chunk 文件名默认为 common . ** 默认是提取的是 node_modules 下依赖的公共文件,你可以通过配置 lib 支持指定的公共模块提取。另外,可以通过配置 **optimization 选项来覆盖默认配置(注意:css 和 js 的公共名字必须一样)
  • easywebpack 3.5.0 版本支持直接 webpack.config.js 文件添加 lib 节点配置即可完成 commonsChunk 公共库的配置。
module.exports = {
  lib:['vue','vuex','axios']
}

这样默认生成的功能代码文件名称为 common.js, 你可以通过如下方式进行自定义

module.exports = {
  lib:{
    name: 'commonlib',
    lib: ['vue','vuex','axios']
  }
}

Script 方式引入 React/Vue 第三方包

编写自定义公共第三方包代码

${root}/src/react-lib.js

import React from 'react';
import ReactDOM from 'react-dom';


export {
  React,
  ReactDOM
}

构建 React 独立 Script 包

通过 easywebpack-js 配置构建第三方包

// ${root}/webpack.config.js
module.exports = {
  framework: 'js',  // 使用 easywebpack-js 解决方案
  entry: {
    'react-lib': 'scr/react-lib.js'
  },
  output: {
    library: "ReactLib" 
  }
}

项目 Webpack 配置 externals 排除第三方包

${root}/webpack.config.js

module.exports = {
  ....
  externals: {
    'react': 'ReactLib.React',
    'react-dom': 'ReactLib.ReactDOM'
  },
}

页面 Script 引入构建的第三方包

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>React Common Lib Test</title>
    <script src="/react-lib.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

实际案例


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
deploy deploy
打包配置支持 webpack.config.js 文件配置 和  easyweback-cli 模式,  easywebpack-cli@4.3.2 开始支持。注意打部署包时, 如果把 node 和 alinode 打进依赖包里面,请保证打包机器操作系统与线上运行的操作系统...
2020-04-18 sky
Next 
webpack.config.js webpack.config.js
webpack.config.js
2020-04-18 sky