├── Readme
└── 1.md
├── package.json
├── readme.md
├── src
├── assets
│ ├── css
│ │ └── common.css
│ ├── fonts
│ │ └── lato-black.woff
│ ├── html
│ │ ├── b-footer.html
│ │ ├── b-header.html
│ │ ├── footer.html
│ │ └── header.html
│ ├── images
│ │ ├── 1.png
│ │ ├── 2.png
│ │ ├── 3.jpg
│ │ ├── MPA.png
│ │ └── webpack.png
│ └── js
│ │ ├── common.js
│ │ ├── jquery.js
│ │ └── jquery.min.js
├── bootstrap
│ ├── bootstrap.css
│ ├── bootstrap.html
│ └── bootstrap.js
├── ckeditor
│ ├── ckeditor.css
│ ├── ckeditor.html
│ └── ckeditor.js
├── echarts
│ ├── echarts.css
│ ├── echarts.html
│ └── echarts.js
├── font
│ ├── FontAwesome
│ │ ├── FontAwesome.otf
│ │ ├── font-awesome.min.css
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ ├── fontawesome-webfont.woff
│ │ └── fontawesome-webfont.woff2
│ ├── IconFont
│ │ ├── iconfont.css
│ │ ├── iconfont.eot
│ │ ├── iconfont.svg
│ │ └── iconfont.ttf
│ ├── font.css
│ ├── font.html
│ └── font.js
├── index
│ ├── index.css
│ ├── index.html
│ └── index.js
├── jquery
│ ├── jquery.css
│ ├── jquery.html
│ └── jquery.js
├── less
│ ├── less.css
│ ├── less.html
│ ├── less.js
│ └── less.less
├── other
│ ├── other.css
│ ├── other.html
│ └── other.js
├── picture
│ ├── picture.css
│ ├── picture.html
│ └── picture.js
└── z-bug
│ ├── z-bug.css
│ ├── z-bug.html
│ └── z-bug.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js
/Readme/1.md:
--------------------------------------------------------------------------------
1 | 开篇点题:
2 | 本系列文章为 jsliang 于2018年6月-7月学习总结,在Word上撰写整整一万字,学习的时候webpack的版本为4.10.0-4.16.0,最终目的是配置出一个Webpack多页面应用配置,即Webpack MPA配置。
3 | PS:值得注意的是,如果webpack大更新,即版本出现大变动的时候,如发现本文还未进行相应更新,请勿继续学习,并顺手通知 jsliang 删除本系列文章,以免耽搁小伙伴们宝贵的学习时间,谢谢。
4 |
5 |
6 | ----------
7 |
8 |
9 | 目录如下:
10 | 序言
11 | 一、磨刀霍霍
12 | 1.1 入口(entry)
13 | 1.2 出口(output)
14 | 1.3 解析器(loader)
15 | 1.4 插件(plugins)
16 | 1.5 配置(webpack.config.js)
17 | 1.6 接口(API)
18 | 二、伐木搭船
19 | 2.1 知识储备
20 | 2.2 起步
21 | 2.2.1 安装基础包
22 | 2.2.2 章节目录
23 | 2.2.3 编写代码
24 | 2.2.4 注释
25 | 2.2.5 安装包
26 | 2.2.6 打包
27 | 2.2.7 查看输出
28 | 2.3 优化
29 | 2.3.1 编写代码
30 | 2.3.2 打包
31 | 2.3.3 查看输出
32 | 2.3.4 小吐槽
33 | 2.3.5 结束?
34 | 2.3.6 问题解答
35 | 2.3.7 完结?
36 | 2.3.8 生产模式
37 | 2.3.9 优化思考【可选】
38 | 2.3.10 完整代码【可选】
39 | 2.4 管理资源
40 | 2.4.1 目录结构
41 | 2.4.2 完整代码
42 | 2.4.3 讲解
43 | 2.4.4 准备
44 | 2.4.5 引入CSS
45 | 2.4.6 引入图片
46 | 2.4.7 引入字体
47 | 2.4.8 引入数据文件
48 | 2.4.9 小结
49 | 2.5 管理输出
50 | 2.5.1 开篇点题
51 | 2.5.2 优雅拷贝
52 | 2.5.3 多js文件
53 | 2.5.4 动态更新HTML
54 | 2.5.5 多态刷新dist
55 | 2.6 开发
56 | 2.6.1 查找报错文件
57 | 2.6.2 实时重新加载
58 | 2.6.3 目录及代码整理
59 | 2.7 分离配置文件
60 | 2.8 调整
61 | 三、扬帆起航
62 |
63 |
64 | ----------
65 |
66 |
67 | jsliang 开始学习Webpack的时候,Webpack的版本是V4.10.0,当我将学习内容整理,并发布GitHub的时候,Webpack的版本已是V4.16.0,变化之快相当令人诧异,而当初 jsliang 百度查找对应资料的时候,发现Webpack只有Webpack2/3的文章,Webpack4的很少,Webpack4讲得透彻的更少,所以 jsliang 能否将Webpack讲个一清二楚, jsliang 也不敢保证。但是,不得不承认的是,自从学习并整理了自己的学习经验后,再去看Vue-cli,比一开始学的时候清晰很多。
68 |
69 | 下面两个地址是 jsliang 的两个GitHub地址,包含了本人学习Webpack的所有经验,其中Webpack多页面应用配置已实践到公司的中型项目中,虽然有稍微小bug,但是不影响它的实用性:
70 | · Webpack 学习地址
71 | Download下来该配置,然后跟着里面放置好的Webpack学习Word文档敲一遍,就能基本入门Webpack了。
72 | · Webpack MPA 配置
73 | 这里包含两个版本,一个是满配(完整配置-主支),一个是基配(基础配置-分支)。然后 jsliang 根据应用到项目中的经验,将满配整理发布到了这个地址:· Webpack 实例
74 |
75 | 如果这两个GitHub项目对你有帮助,点个 star 不胜感激
76 | jsliang 将持续更新Webpack系列文章,想目睹Webpack风采的,那就随我一起遨游Webpack吧,谢谢!
77 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-config",
3 | "version": "3.1.0",
4 | "description": "The basic webpack configuration by jsliang",
5 | "scripts": {
6 | "build": "webpack --config webpack.prod.js",
7 | "dev": "webpack-dev-server --open --config webpack.dev.js"
8 | },
9 | "keywords": [
10 | "webpack",
11 | "MPA"
12 | ],
13 | "author": "jsliang",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "clean-webpack-plugin": "^0.1.19",
17 | "css-loader": "^0.28.11",
18 | "file-loader": "^1.1.11",
19 | "glob": "^7.1.2",
20 | "html-webpack-plugin": "^3.2.0",
21 | "html-withimg-loader": "^0.1.16",
22 | "less": "^3.0.4",
23 | "less-loader": "^4.1.0",
24 | "mini-css-extract-plugin": "^0.4.0",
25 | "optimize-css-assets-webpack-plugin": "^4.0.3",
26 | "style-loader": "^0.21.0",
27 | "uglifyjs-webpack-plugin": "^1.2.7",
28 | "url-loader": "^1.0.1",
29 | "webpack": "^4.12.1",
30 | "webpack-cli": "^3.0.8",
31 | "webpack-dev-server": "^3.1.4",
32 | "webpack-merge": "^4.1.3"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | MPA的webpack基础配置
2 | ======
3 |
4 | ## ☆ Demo地址:
5 | · → 点击这里 ←
6 |
7 | ## ☆ 说明:
8 | · jsliang从webpack的4.10.0出发,在 webpack-study 项目中编写了webpack的学习文档,如果你还没接触过webpack,希望你看完我的学习Word能有所感悟,然后该webpack-MPA-config(webpack多页面配置)项目初次发布到GitHub上时webpack版本已到v4.14.0(本次上传版本为V4.16.1)。是的,变化之快难以想象。
9 | · 码字不易,进来看到希望你能点个star;如果该配置对你有帮助或有所启发,请点个star;如果有疑问,请提交Issue或者加jsliang的QQ:1741020489. 谢谢支持~
10 |
11 | ## ☆ 思路图:
12 |
13 |
14 | ## ☆ 使用方法:
15 | 安装依赖包: npm i
16 | 进入开发模式: npm run dev
17 | 打包成静态文件:npm run build
18 |
19 | ## ☆ 配置目的:
20 | · 实现live-server的实时重新加载(live reloading)功能
21 | · 实现css/js打包压缩
22 | · 实现共用HTML模板(header.html/footer.html)
23 | · ……等等
24 |
25 | ## ☆ 实现功能:
26 | ### - 共有功能 | webpack.common.js
27 | · 按模块划分目录。即在src文件夹下新增index的文件夹就是新增index模块,然后index下按index.html/index.css/index.js设置(index.js需require index.css,html正常使用),即可按模块划分目录使用。
28 | · 开发或者生产模式打包前自动删除dist文件夹。妈妈再也不用担心我手动删除dist目录删到手软啦~
29 | · 能处理以下文件:
30 | .htm/.html、
31 | .css/.less、
32 | .jpg/.jpeg/.png/.gif/.svg、
33 | .woff/.woff2/.eot/.ttf/.otf、
34 | .js文件(ES6/7未作处理,使用ES6/7可能有bug)。
35 |
36 | ### - 开发模式 | webpack.dev.js
37 | · 拥有共有功能所有功能
38 | · 使用npm run dev能启动开发模式,能自动检查错误并报错:
39 | · 默认启动localhost:8080,如果想配置局域网(WIFI),通过其他电脑、手机查看的话,请开启host选项,并设置值为WiFi的IPV4地址,设置后访问:http://192.168.1.107:8080 即可(注:如果没正确设置,将无法正常启动)。
40 |
41 | ### - 生产模式 | webpack.prod.js
42 | · 拥有共有功能所有功能
43 | · 打包并压缩JavaScript
44 | · 打包并压缩CSS
45 |
46 | ## ☆ 使用技巧:
47 | ### - 模块
48 | · 在src下新建文件夹表示新增一个模块:src/××
49 | · 在src/××下新增正常配置为××.html、××.css/less、××.js:src/××/××.html(注:如果需要使用less,可以直接用.less文件,已配置)
50 | · html/css/js的链接是:js文件require('./××.css')或者require('.××.less');然后html文件正常编写、链接图片即可,没有注意点。
51 |
52 | ### - 模板
53 | · HTML能通过 #include("../assets/html/header.html"); 引入其他HTML文件(详情可看index.html)。通过该方法可以复用HTML文件,减少工作量。
54 | · 模板中js的调用跟模块调用方式一样,但请注意层级。
55 |
56 | ## ☆ bug与缺陷
57 | · 无法转编码为gb2312(工作需要,但是配置不成功,暂未实现)。 | webpack.prod.js
58 | · 图片200K内打包为base64编码,主要是background:url()配置失败,大于200K的background无法正常显示,而<img>标签能正常引用。 | webpack.common.js
59 | · 字体限制大小100K,太大会出现无法打包的问题 | webpack.common.js
60 |
--------------------------------------------------------------------------------
/src/assets/css/common.css:
--------------------------------------------------------------------------------
1 | /* 共用样式 */
2 | body, ul, li, a {
3 | margin: 0;
4 | padding: 0;
5 | }
6 | .text-center {
7 | text-align: center;
8 | }
9 | .text-author {
10 | color: rgb(255, 166, 0);
11 | font-size: 1.2em;
12 | }
13 | h3, h4, p {
14 | text-indent: 2em;
15 | }
16 |
17 | /* 头部 */
18 | .container {
19 | width: 1000px;
20 | margin: 0 auto;
21 | }
22 | ul {
23 | margin-top: 0;
24 | background: deepskyblue;
25 | height: 54px;
26 | border-radius: 10px;
27 | }
28 | ul li {
29 | list-style: none;
30 | }
31 | ul li a {
32 | text-decoration: none;
33 | float: left;
34 | color: rgb(121, 120, 120);
35 | border: 1px solid rgb(255, 255, 255);
36 | border-radius: 5px;
37 | margin: 5px;
38 | padding: 10px;
39 | }
40 | ul li a:hover {
41 | color: black;
42 | }
43 | ul li:first-child {
44 | margin-left: 10px;
45 | }
46 |
47 | /* 底部 */
48 | .footer {
49 | text-align: center;
50 | margin-top: 30px;
51 | }
52 |
53 |
--------------------------------------------------------------------------------
/src/assets/fonts/lato-black.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiangJunrong/webpack-MPA-config/68c489a1014d05dd094b783b6fd30d2048ef9131/src/assets/fonts/lato-black.woff
--------------------------------------------------------------------------------
/src/assets/html/b-footer.html:
--------------------------------------------------------------------------------
1 |