Skip to content
The basic webpack configuration by jsliang - jsliang的多页面webpack配置
HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 68c489a Aug 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Readme 开篇 Aug 8, 2018
src 增加other页面 Aug 7, 2018
package.json 更新版本为3.1.0 Aug 7, 2018
readme.md 更新在线案例 Aug 6, 2018
webpack.common.js 增加other页面 Aug 7, 2018
webpack.dev.js first-commit Jul 2, 2018
webpack.prod.js first-commit Jul 2, 2018

readme.md

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

You can’t perform that action at this time.