vuecli webpack 外部js 怎么导入

JavaScript08

vuecli webpack 外部js 怎么导入,第1张

把外部的 CSS样式和JS文件,导入DW软件中,一般都是通过在DW中新建一个站点目录,然后在设置一个文件夹,为站点的根目录,然后在这个目录中有个js和css的文件夹,包涵着文件,然后在DW的站点中,就能看到JS、css文件了,可以看下步骤截图:1.点击站点-》新建站点,填写好你的站点名字,文件路径2.然后点击保存之后,这个目录下的所有文件就都导入进来了,这样就能到js和css文件了。

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

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

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

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

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

将上面三个方法都改为显式添加到全局,打包后引入js调用方法即可正常显示。

前面的两个方法因为是在html中直接调用的所以还有另一种处理方法:添加事件监听

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

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映射表,对打包后的包的大小和打包速度有很大影响