/webpack-for-muti-pages

webpack 多页面应用基础框架

Primary LanguageJavaScript

传统多页应用webpack配置

构建过程

推荐目录结构

  build
  config
  static              // 存放静态资源
  src
   |———— views
   |       |———— index
   |       |       |————— index.html
   |       |       |————— index.css
   |       |       |————— index.js
   |       |
   |       |———— index2
   |               |————— index.html
   |               |————— index.css
   |               |————— index.js
   |
   |———— lib         // 存放第三方库

解释

  • 为什么要使用这种目录结构？

因为entry, HtmlWebpackPlugin的配置都比较麻烦，需要自己手动配置。但是如果固定了index.html, index.js,index.css这些文件名，将会比较方便使用代码自动生成这些配置。

再者，个人觉得这种模块化的目录结构更利于项目的管理，并且更加清晰

如果你还是想要更改这些文件的名字，那每次添加新的页面你都必须在webpack中去配置一遍，想想都觉得烦，是吧？所以还是不推荐更改这些文件的名字

如果你按不作更改的话，那么你可以使用我提供的懒人指令

一些说明

  1. 这个配置来源于vue-cli， 对其进行一些更改，令其能够适用于传统多页项目
  2. 默认在生产的时候关闭sourceMap
  3. 生产时开启了gzip
  4. 已自带dev-server，以及代理转发功能
  5. 已集成babel，放心使用es6语法
  6. build/pages.json为页面的配置文件， 其中root为页面的目录，默认为src，你可以自行更改为自己的。paegs的话无需更改(除了删除)。后面会有说明

使用方法

npm install 安装完依赖
npm run dev 开发
npm run build 打包
npm run build --report 打包并生产分析表格

代理转发的配置

在`config/index.js`中更改
proxyTable: {
  '/api': {
    target: '',       // 接口域名
    changeOrigin: true,
  }
}

它会把代码中以api开头的接口地址转发到target域名下，举个例子 接口地址为api/getList，其域名为http://www.abc.com 当你

$.ajax({
  url: 'api/getList',
  ..........
})

发送请求的时候，实际上是请求http://www.abc.com/api/getList

指令

npm run create filename filename 为页面名/目录名

运行指令后，会根据build/pages.json中的root路径，在其中创建一个目录， 目录中包含index.html,index.css, index.js这三个默认的初始文件。

并且它会自动的为build/pages.json中的pages增添新的页面，无需自己手动配置

这样每次创建新页面的时候就不用自己手动创建一个目录，再创建三个文件。

需要注意的是当在删除一个目录的时候，需要自己手动删除pages中相应的内容