webpack-multi-page github地点

1、疾速运用

1.1 克隆项目

git clone https://github.com/lfyfly/webpack-multi-page.git

删除.git文件夹，这是我的commit纪录，所以删除

1.2 装置依靠

npm i

1.3 进入开辟形式

npm run dev

1.4 打包

npm run build

1.5 一键兼容webp图片

在实行完npm run build后实行npm run webp

默许情况下html中的img[src]会被处置惩罚成img[data-src]

• 当img的src为http开首则会被疏忽该处置惩罚
• 当img的className中包括not-webp开首则会被疏忽该处置惩罚

1.6 图片紧缩

src/assets/_img（原图文件夹） -> src/assets/img（紧缩后图片文件夹）

npm run imgmin

1.7 雪碧图

_sprites_src/xxx/*.png（原图文件夹） -> src/sprites/xxx.css + src/sprites/xxx.png

npm run sp

1.8 设置文件

详见根目次下webpack.cfg.js

2、功用简介

2.1 开辟形式

• 多页面开辟，支撑vue
• 支撑无需引入即可全局运用的global.scss
• 支撑px2rem
• src/pages中的html（或pug）文件和src/js中的js（进口）文件，必需一一对应
• 新增页面，须要从新运转npm run dev
• html，css，js 变动自动革新
• scss，es6+，pug支撑
• 支撑代办设置

2.2 关于图片资本

• 图片不要放在/static文件下，而是放在/assets。

  • 由于html中img标签的src假如是绝对途径则会被定为到src目次下，没法援用到static目次下
  • css中图片假如以/static途径开首，会不经由url-loader所处置惩罚

• html中的img标签src对应图片能够被url-loader所处置惩罚

  • 第一种体式格局是相对html途径
  • 第二种体式格局以/assets开首的绝对途径，自动定位到src/assets目次下

2.3 打包相干

• 打包后html文件，css文件图片途径圆满天生相对途径（为此css与html打包在统一目次下）
• 打包cdn途径一键设置
• 静态文件目次static文件夹，打包会被拷贝到dist目次

• 支撑打包文件版本hash，提取vendor.js common.js [page].js文件，只对模块变动的css，js文件版本hash举行变动

  • vendor.js是指/node_modules文件夹中援用的第三方插件
  • common.js是指被多个页面援用凌驾2次而且，大小凌驾20k时，才会天生
  • [page.js]对应着每一个页面零丁的js文件
• css文件零丁提取
• 小于8k文件自动转base64代码

gulp 多页面设置

dev-easy