Webpack

Question

我正在尝试将我的应用程序的大约 10 多个 javascript 文件捆绑在一起，这些文件作为脚本加载到 index.html 文件中。它们根据彼此的依赖关系正确排序。

<script src="/js/main.js"></script>
<script src="/js/user.js"></script>
<script src="/js/contact.js"></script>
...

每个文件中的代码如下所示：

// main.js
const _main = {};
_main.MethodOne = function(){
  ...
}

// user.js
const _user = {};
_user.MethodTwo = function(){
  // Can access the method from main.js file
  _main.MethodOne();
}

// contact.js
const _contact = {};
_contact.MethodThree = function(){
  // Can access the methods from main.js & user.js file
  _user.MethodTwo();
  _main.MethodOne();
}

现在，当通过 webpack 捆绑它们时，常量变量 _main、_contact 和 _user 被重命名为一些随机字母。但是，用于从其他文件调用这些方法的名称在每种情况下都保持不变，即 _user.MethodTwo()、_main.MethodOne() 没有改变。

这是我的webpack.config.js

entry: {
    vendors: [
        './public/js/colorpicker.js',
        ...
    ],
    app: [
        './public/js/main.js',
        './public/js/user.js',
        './public/js/contact.js'
    ]
},
mode: 'production',
output: {
    filename: 'js/[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    publicPath: 'auto',
    assetModuleFilename: 'img/[hash][ext][query]'
},

我阅读了 webpack 文档，但是没有得到关于这个问题的任何线索。

Answer 1

最好的办法是使用导入和导出转向模块方法。

因此，每个文件都将导出相应的变量，而不是像您那样定义全局变量。如果一个文件需要来自另一个文件的变量，只需导入它即可。

// main.js
export const _main = {};
_main.MethodOne = function(){
  ...
}

// user.js
import {_main} from "./main.js";
export const _user = {};
_user.MethodTwo = function(){
  // Can access the method from main.js file
  _main.MethodOne();
}

// contact.js
import {_main} from "./main.js";
import {_user} from "./user.js";
const _contact = {};
_contact.MethodThree = function(){
  // Can access the methods from main.js & user.js file
  _user.MethodTwo();
  _main.MethodOne();
}

阅读更多关于 import/export here

Webpack - 捆绑多个关于可重用方法和变量的 js 文件

Webpack - Bundling multiple js files with respect to resusable methods and variable from one another

javascript

bundling-and-minification

webpack-5