webpack4 多页面配置功能齐全开箱即用

antz 发布于2019-08-23 10:25 / 2353人阅读

摘要：地址快速使用克隆项目删除文件夹，这是我的记录，所以删除安装依赖进入开发模式打包一键兼容图片在执行完后执行默认情况下中的会被处理成当的为开头则会被忽略该处理当的中包含开头则会被忽略该处理图片压缩原图文件夹压缩后图片文件夹雪碧图原

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

超融合服务器混合云开箱即用 webrtc 关于页面弹框功能实现 webpack4 多页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96330.html

基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
webpack4新特性介绍

摘要：当下最流行的模块打包器于年月日正式发布版本，代号。从官方的发布日志来看本次大版本更新带来了很多新特性更新和改善，这将会让的配置更加简单。本文，笔者将会全面介绍的新特性及实践。只支持模块，目前处于试验阶段。导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins，它可以改变、压缩和优化各种各样的文件。它的输入...

NotFound 2019-08-22 15:42 评论0 收藏0
开箱即用的多页面webpack脚手架

摘要：开箱即用的多页面脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用，这样的框架。痛不欲生，即使写完了，以后的迭代维护同样痛苦。还不如创建一个脚手架，以后遇到这种官网多页面的需求的时候拿来即用，岂不美哉。开箱即用的多页面webpack脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用react，vue这样的框架。本来...

sunnyxd 2019-08-22 17:17 评论0 收藏0
开箱即用的多页面webpack脚手架

摘要：开箱即用的多页面脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用，这样的框架。痛不欲生，即使写完了，以后的迭代维护同样痛苦。还不如创建一个脚手架，以后遇到这种官网多页面的需求的时候拿来即用，岂不美哉。开箱即用的多页面webpack脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用react，vue这样的框架。本来...

atinosun 2019-08-02 10:27 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0