调用webpack打包后的js中的函数报错问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了调用webpack打包后的js中的函数报错问题相关的知识,希望对你有一定的参考价值。

参考技术A 今天用原生js和jquery动态生成一个表单弹窗,因为想在使用的时候只引入一个js文件,所以想到用webpack将js和css打包到一起,这样就不用单独引入css文件了,结果使用过程中还是踩了一些坑。

文件里面js函数较多有生成dom的有校验的有提交表单获取值的,在这我只说一下出现问题的js函数,表单所有dom结构都是动态生成的,有两个点击事件是用原生js直接写到html标签上面的,一个方法是用来关闭表单一个方法是用来提交表单。

还有一个方法是给外部调用触发生成表单弹窗的方法

通过webpack打包后在页面中引入打包后的js文件,直接调用questionnaire方法打开控制台发现报未定义

webpack打包后的js文件中的方法和变量都变成了局部的,外部无法直接访问。解决办法:修改上面三个方法的定义方式

将上面三个方法都改为显式添加到全局,打包后引入js调用方法即可正常显示。
前面的两个方法因为是在html中直接调用的所以还有另一种处理方法:添加事件监听

打包引入后发现同样是可以的。

如何解决webpack打包后,dist文件过大的问题

去除不必要的插件
刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。
提取第三方库
像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置

entry:
bundle: 'app'
vendor: ['react']

plugins:
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')


这样打包之后就会多出一个 vendor.js 文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在 index.html 中
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置

externals:
'react': 'React'


externals 对象的 key 是给 require 时用的,比如 require('react'),对象的 value 表示的是如何在 global 中访问到该对象,这里是 window.React。这时候 index.html 就变成下面这样
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>
当然,个人更推荐第一种方式。
代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin,只需要在配置文件中引入即可。

plugins: [
new webpack.optimize.UglifyJsPlugin(
compress:
warnings: false

)
]

加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。
另外,服务器端还可以开启 gzip 压缩,优化的效果更明显。
代码分割
什么是代码分割呢?我们知道,一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说,我们更想要的是只加载当前 UI 的代码,没有点击的部分不加载。
看起来好像挺麻烦,但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。
code split 是不支持 ES6 的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用 ES6 的方式,这时候不管导入是用 CommomJs 还是 AMD,都会失败,而且还不会报错!
当然会踩到这个坑也是因为我刚刚才用 NodeJS,而且一入门就是用 ES6 的风格。除了这个之外,还有一点也要注意,在生产环境的 webpack 配置文件中,要加上 publicPath
output:
path: xxx,
publicPath: yyy,
filename: 'bundle.js'

不然的话,webpack 在加载 chunk 的时候,路径会出错。
设置缓存
开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。
对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现
output:
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'

打包后的文件名加入了 hash 值
const bundler = webpack(config)
bundler.run((err, stats) =>
let assets = stats.toJson().assets
let name
for (let i = 0; i < assets.length; i++)
if (assets[i].name.startsWith('main'))
name = assets[i].name
break


fs.stat(config.buildTemplatePath, (err, stats) =>
if (err)
fs.mkdirSync(config.buildTemplatePath)

writeTemplate(name)
)
)
手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。
参考技术A github上面有webpack作者写的一个webpack打包分析的工具,可视化的看到webpack的状态,以及优化的一些建议,非常的不错。

以上是关于调用webpack打包后的js中的函数报错问题的主要内容,如果未能解决你的问题,请参考以下文章

webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc (();

解决:webpack编译以及打包报错

html-webpack-plugin打包报错

解决vue打包报错UglifyJs

vite 动态 import 引入打包报错解决方案

webpack五个核心模块