jsliang的多页面webpack配置
The basic webpack configuration by jsliang - jsliang的多页面webpack配置
JavaScript 构建工具
共27Star
详细介绍
MPA的webpack基础配置
☆ Demo地址:
· → 点击这里 ←
☆ 说明:
· jsliang从webpack的4.10.0出发,在 webpack-study 项目中编写了webpack的学习文档,如果你还没接触过webpack,希望你看完我的学习Word能有所感悟,然后该webpack-MPA-config(webpack多页面配置)项目初次发布到GitHub上时webpack版本已到v4.14.0(本次上传版本为V4.16.1)。是的,变化之快难以想象。
· 码字不易,进来看到希望你能点个star;如果该配置对你有帮助或有所启发,请点个star;如果有疑问,请提交Issue或者加jsliang的QQ:1741020489. 谢谢支持~
☆ 思路图:
☆ 使用方法:
安装依赖包: npm i
进入开发模式: npm run dev
打包成静态文件:npm run build
☆ 配置目的:
· 实现live-server的实时重新加载(live reloading)功能
· 实现css/js打包压缩
· 实现共用HTML模板(header.html/footer.html)
· ……等等
☆ 实现功能:
- 共有功能 | webpack.common.js
· 按模块划分目录。即在src文件夹下新增index的文件夹就是新增index模块,然后index下按index.html/index.css/index.js设置(index.js需require index.css,html正常使用),即可按模块划分目录使用。
· 开发或者生产模式打包前自动删除dist文件夹。妈妈再也不用担心我手动删除dist目录删到手软啦~
· 能处理以下文件:
.htm/.html、
.css/.less、
.jpg/.jpeg/.png/.gif/.svg、
.woff/.woff2/.eot/.ttf/.otf、
.js文件(ES6/7未作处理,使用ES6/7可能有bug)。
- 开发模式 | webpack.dev.js
· 拥有共有功能所有功能
· 使用npm run dev能启动开发模式,能自动检查错误并报错:
· 默认启动localhost:8080,如果想配置局域网(WIFI),通过其他电脑、手机查看的话,请开启host选项,并设置值为WiFi的IPV4地址,设置后访问:http://192.168.1.107:8080 即可(注:如果没正确设置,将无法正常启动)。
- 生产模式 | webpack.prod.js
· 拥有共有功能所有功能
· 打包并压缩JavaScript
· 打包并压缩CSS
☆ 使用技巧:
- 模块
· 在src下新建文件夹表示新增一个模块:src/××
· 在src/××下新增正常配置为××.html、××.css/less、××.js:src/××/××.html(注:如果需要使用less,可以直接用.less文件,已配置)
· html/css/js的链接是:js文件require('./××.css')或者require('.××.less');然后html文件正常编写、链接图片即可,没有注意点。
- 模板
· HTML能通过 #include("../assets/html/header.html"); 引入其他HTML文件(详情可看index.html)。通过该方法可以复用HTML文件,减少工作量。
· 模板中js的调用跟模块调用方式一样,但请注意层级。
☆ bug与缺陷
· 无法转编码为gb2312(工作需要,但是配置不成功,暂未实现)。 | webpack.prod.js
· 图片200K内打包为base64编码,主要是background:url()配置失败,大于200K的background无法正常显示,而<img>标签能正常引用。 | webpack.common.js
· 字体限制大小100K,太大会出现无法打包的问题 | webpack.common.js