Estoy tratando de agrupar más de 10 archivos javascript de mi aplicación que se cargan como scripts en el archivo index.html . Están correctamente secuenciados según sus dependencias entre sí.
<script src="/js/main.js"></script> <script src="/js/user.js"></script> <script src="/js/contact.js"></script> ...El código dentro de cada archivo se ve así:
// 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(); } Ahora, al agruparlos a través del paquete web, las variables constantes _main , _contact y _user se renombran con algunas letras aleatorias. Sin embargo, los nombres utilizados para invocar esos métodos desde otros archivos siguen siendo los mismos en cada caso, es decir, _user.MethodTwo() , _main.MethodOne() no cambia.
Este es mi 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]' },Leí la documentación del paquete web, sin embargo, no obtuve ninguna pista sobre este problema.
Lo mejor que puede hacer es pasar al enfoque de módulo mediante el uso de importación y exportación.
entonces, en lugar de definir variables globales como lo hace, cada archivo exportaría la variable correspondiente. Si un archivo necesita una variable de otro archivo, simplemente tiene que importarla.
// 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(); }Lea más sobre importación/exportación aquí