Skip to content

xiaoboost/require-split-chunk-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

require-split-chunk-webpack-plugin

该插件用于在 Nodejs 环境下代码分割中自动require分割出去的文件。

这个插件有什么用

在 Web 浏览器的工程化解决方案中,代码分割和打包是很常见的步骤。在代码分割之后,通常将会有另外的插件将生成的文件加入到对应的html文件的引用中。
比如说,在某个前端工程中我们生成了common.jsmain.js两个文件,这两个文件实际上是在对应的html文件相关联的,html文件中通常会这么写:

<html>
    <body>
        <script src="/js/common.js"></script>
        <script src="/js/main.js"></script>
    </body>
</html>

而在 Nodejs 环境中,就算是进行了代码打包和分割,由于是直接运行入口文件,没有html来完成对分割代码的自动引用,所以必然会发生错误。
使用此插件后,会在打包完成的代码中插入一段require分割代码的代码,这样就能解决在 Nodejs 环境中自动引用的问题。

用法

安装

npm install require-split-chunk-webpack-plugin -D

webpack 配置

const { RequireSplitChunkPlugin } = require('require-split-chunk-webpack-plugin');

module.exports = {
    target: 'node',
    plugins: [
        new RequireSplitChunkPlugin(),
    ],
};

插件内部运行时会检测 Webpack 的 target 属性。当 target 为下列值时,该插件才会启动:

  • node
  • electron-main
  • electron-renderer
  • electron-preload
  • node-webkit

兼容性

  • v1 版本支持 webpack 4 版本
  • v2 版本支持 webpack 5 版本