本文目录一览：
Webpack 怎么改 html 中的 js 路径
在HTML文件中如果有
“`html
script src=”./src/js/A.js”/script
script src=”./src/js/B.js”/script
“`
wepack之后，A，B的源码合并并压缩为bundle.js
有什么方法可以改为
“`html
script src=”./build/js/bundle.js”/script
“`
调用webpack打包后的js中的函数报错问题
今天用原生js和jquery动态生成一个表单弹窗，因为想在使用的时候只引入一个js文件，所以想到用webpack将js和css打包到一起，这样就不用单独引入css文件了，结果使用过程中还是踩了一些坑。
文件里面js函数较多有生成dom的有校验的有提交表单获取值的，在这我只说一下出现问题的js函数，表单所有dom结构都是动态生成的，有两个点击事件是用原生js直接写到html标签上面的，一个方法是用来关闭表单一个方法是用来提交表单。
还有一个方法是给外部调用触发生成表单弹窗的方法
通过webpack打包后在页面中引入打包后的js文件，直接调用questionnaire方法打开控制台发现报未定义
webpack打包后的js文件中的方法和变量都变成了局部的，外部无法直接访问。解决办法：修改上面三个方法的定义方式
将上面三个方法都改为显式添加到全局，打包后引入js调用方法即可正常显示。
前面的两个方法因为是在html中直接调用的所以还有另一种处理方法：添加事件监听
打包引入后发现同样是可以的。
webpack打包Js文件
a .
注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js
b .
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件
这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中
其实webpack打包指令除了可以通知要打包哪些文件，还可以通过配置
2.2webpack常见配置
刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了
如果想要使用其他指令，可以直接修改的 package.json 的scirpts
以后再打包的时候，就可以直接使用npm run test了；
当然，还可以看下devtool的取值，他生成的sourcemap映射表，对打包后的包的大小和打包速度有很大影响
原创文章，作者：TUPD，如若转载，请注明出处：https://www.506064.com/n/134412.html
微信扫一扫 
支付宝扫一扫 