git clone https://github.com/lfyfly/webpack-multi-page.git
删除.git文件夹，这是我的commit记录，所以删除
npm i
npm run dev
npm run build
在执行完npm run build后执行npm run webp
- 当img的src为
http开头则会被忽略该处理 - 当img的className中包含
not-webp开头则会被忽略该处理
src/assets/_img（原图文件夹） -> src/assets/img（压缩后图片文件夹）
npm run imgmin
_sprites_src/xxx/*.png（原图文件夹） -> src/sprites/xxx.css + src/sprites/xxx.png
npm run sp
详见根目录下webpack.cfg.js
- 多页面开发，支持vue
- 支持无需引入即可全局使用的
global.scss - 支持px2rem
src/pages中的html（或pug）文件和src/js中的js（入口）文件，必须一一对应- 新增页面，需要重新运行
npm run dev - html，css，js 更改自动刷新
- scss，es6+，pug支持
- 支持代理配置
-
图片不要放在
/static文件下，而是放在/assets。- 因为html中img标签的
src如果是绝对路径则会被定为到src目录下，无法引用到static目录下 - css中图片如果以
/static路径开头，会不经过url-loader所处理
- 因为html中img标签的
-
html中的img标签
src对应图片可以被url-loader所处理- 第一种方式是
相对html路径 - 第二种方式以
/assets开头的绝对路径，自动定位到src/assets目录下 - 第三种种方式以
~@/assets开头的绝对路径，自动定位到src/assets目录下
- 第一种方式是
-
csss中的背景图写法
- 第一种方式是
相对css文件的相对路径 - 第二种种方式以
~@/assets开头的绝对路径，自动定位到src/assets目录下
- 第一种方式是
-
为了css文件图片路径完美生成
相对路径，会被打包成奇怪的图片路径../../static/img/xxx.jpg -
打包cdn路径一键配置
-
静态文件目录
static文件夹，打包会被拷贝到dist目录 -
支持打包文件版本hash，提取
vendor.jscommon.js[page].js文件，只对模块更改的css，js文件版本hash进行更改vendor.js是指/node_modules文件夹中引用的第三方插件common.js是指被多个页面引用超过2次并且，大小超过20k时，才会生成[page.js]对应着每个页面独自的js文件
-
css文件单独提取
-
小于8k图片文件和字体文件自动转base64代码
-
pages多级目录支持（忽略下划线开头的文件和文件夹）
- 当配置文件
webpack.cfg.js中build.assetsPublicPath === './'，二级目录以上页面需要在页面中，增加<base>标签进行修正相对路径。如src/pages/test/test-0.html中的<head>中的<base href="../" /> - 当配置文件
webpack.cfg.js中build.assetsPublicPath === '/', 则路径为绝对路径，无需修正路径
- 当配置文件
-
页面共有css文件入口支持
commonCss:{
entry: path.resolve(__dirname,'src/common_css_entry.js'), // String 必填，入口文件，绝对地址
exclude:['about'] // Arrary 排除页面，不填所有页面都引入common_css
// ['about'] 代表about页面不引用 common_css
},