使用webpack打包一个单独的js文件

使用webpack打包一个单独的js文件

image.png

  • 上面的图片是我的项目目录及简单的进行webpack的配置和打包后的目录dist和js文件
  • 第一种就是使用配置的webpack进行打包,输入指令
  npx webpack
  • 打包成功后,会生成一个dist文件夹及js文件
  • 第二种就是配置打包的命令就OK了

使用webpack打包一个单独的js文件

image.png

  • 直接输入 npm run build就可以了
  • 接下来看看我们打包的js文件,直接看最底部

使用webpack打包一个单独的js文件

image.png

  • 箭头指向的方向就是我们封装的js文件中的方法,注意了:前方高能,在我们封装的js文件中,一般不要写成function add(){}等这种方法,要写成全局的那种

使用webpack打包一个单独的js文件

image.png

  • 因为webpack打包后是一个自执行函数,百度上有人说可以使用window.方法名=function(){},来提升作用域,但是我可能是有点小垃圾,没弄出来,最后选择了这种全局的方法
  • 在html页面中进行引入我们压缩后的文件,注意我配置的是绝对路径,所以要看看你的路径引入对不对了

使用webpack打包一个单独的js文件

image.png

  • 这样我们的方法就可以被调用了

文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址:http://www.mqs.net/post/14943.html

相关阅读

添加新评论