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]
会被处理成img[data-src]
http
开头则会被忽略该处理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
global.scss
src/pages
中的html(或pug)文件和src/js
中的js(入口)文件,必须一一对应npm run dev
图片不要放在/static
文件下,而是放在/assets
。
src
如果是绝对路径则会被定为到src
目录下,无法引用到static
目录下/static
路径开头,会不经过url-loader
所处理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.js
common.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="https://github.com/lfyfly/webpack-multi-page/blob/master/./" />
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
},