webpack.ProvidePlugin or typescript web配置问题

一、vue-cli3单页面构建方案

1、在目标文件夹内执行

 
2、打开router文件夹内的index看情况配置router的模式,是默认的hash还是historyps:个人推介history模式,因为内嵌如app的H5页面的话有可能某些app是不允许页面上帶有’#’的,而hash会在url上利用#来做路由转发ps:history模式在发布到服务器上需要nginx配置一下。详情请自行百度
 
3、在根目录新建vue.config.js,覆盖webpack配置将如下內容copy到文件中,作为初始配置
 
4、配置完这些后npm run serve启动项目,会加载如下两个js
 

app.js:是所有单页面首次渲染都必须加载的js内部合并了框架及js(如vue、vue-x、vue-router及非异步组件但引用了的node_modules中的模块),及所有页面公用的模块about.js:是每个页面独立的js,这个跟router中引用模块的方式有关

 
这种引用方式引鼡页面模版组件,就不会出现about.js文件因为属于同步模块,当前件建的js会被打包进app.js但是此种随着页面的增多,公用的app.js会越来越大看情况茬app.js大小接受的前提下权衡使用;2、
 
 

要自动加载 jquery我们可以将两个变量都指向对应的 node 模块:

然后在我们任意源码中:

  • 接下来会弹出一些信息, 就是一些項目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件

  • 直到等它显示版本号码就表示你成功了

  • 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
  • 创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
    entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
    output:对应输出项配置
    path :入口文件最终要输出到哪里
  • 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:

多个js文件时, 如何进行引入

  • 在src的js文件夹下创建一个基本的工具tool.js

 
  • 在img文件夹下找个图片放进去

多个html文件时怎么处理

  • 修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了
  • html文件所引用的目录也要更改:
  • 找到文件洳果错误的位置

我要回帖

更多关于 typescript web 的文章

 

随机推荐