├── src
├── pages
│ ├── B
│ │ ├── Status.less
│ │ └── B.js
│ ├── Main
│ │ ├── Main.less
│ │ └── Main.js
│ └── A
│ │ └── A.js
├── store
│ ├── store.js
│ └── loading_store.js
├── styles
│ ├── common
│ │ ├── common.less
│ │ ├── utils.less
│ │ └── reset.less
│ └── theme
│ │ ├── index.less
│ │ └── variables.less
├── App.js
├── router
│ ├── router_lazyload.js
│ └── router.js
├── components
│ ├── Header
│ │ ├── Header.less
│ │ └── Header.js
│ ├── Loading
│ │ ├── Loading.js
│ │ └── Loading.less
│ ├── Skin
│ │ ├── Skin.less
│ │ └── Skin.js
│ └── Aside
│ │ ├── Aside.less
│ │ └── Aside.js
├── index.js
└── utils
│ └── usePlugin
│ ├── utils.js
│ └── axios.js
├── dist
├── static
│ ├── font
│ │ ├── iconfont.eot
│ │ ├── iconfont.ttf
│ │ └── iconfont.woff
│ ├── css
│ │ ├── 2.css
│ │ ├── main.css
│ │ └── vendors.css
│ └── js
│ │ ├── 3.bundle.js
│ │ ├── 2.bundle.js
│ │ └── main.bundle.js
├── index.html
└── dll
│ └── vendor.mainfist.json
├── README.md
├── .gitignore
├── public
└── index.html
├── webpack.config.dev.js
├── webpack.config.dll.js
├── webpack.config.prod.js
├── package.json
└── webpack.config.common.js
/src/pages/B/Status.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/theme/index.less';
2 |
3 | .asd{
4 | background:#000
5 | }
--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
1 | import loadingStore from './loading_store'
2 |
3 | export default {
4 | loadingStore
5 | }
--------------------------------------------------------------------------------
/dist/static/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xw-Zhou/webpack-optimizeDemo/HEAD/dist/static/font/iconfont.eot
--------------------------------------------------------------------------------
/dist/static/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xw-Zhou/webpack-optimizeDemo/HEAD/dist/static/font/iconfont.ttf
--------------------------------------------------------------------------------
/dist/static/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xw-Zhou/webpack-optimizeDemo/HEAD/dist/static/font/iconfont.woff
--------------------------------------------------------------------------------
/src/styles/common/common.less:
--------------------------------------------------------------------------------
1 | @import './reset.less';
2 |
3 | html,body{
4 | height: 100%;
5 | }
6 |
7 | ::selection{
8 | background: #1890ff!important;
9 | color:#fff!important;
10 | }
--------------------------------------------------------------------------------
/src/pages/Main/Main.less:
--------------------------------------------------------------------------------
1 |
2 | .contentWrap{
3 | background: #eee;
4 | padding:20px;
5 | min-height: calc(100vh - 70px);
6 | }
7 | .content{
8 | background:#fff;
9 | border-radius:5px;
10 | padding:15px;
11 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## webpack优化DEMO
2 |
3 | 怎么运行？
4 | ```
5 | yarn install
6 | yarn run dll //注意这里的顺序别弄错了，yarn run dll需要先执行
7 | yarn run dev
8 | ```
9 |
10 | demo里的antd更换皮肤功能在打包==yarn run build==之后需要放在服务器上才会生效，直接==yarn run dev==也可以生效
11 |
12 |
13 | ps：demo写的比较粗糙，请见谅
14 |
--------------------------------------------------------------------------------
/dist/static/css/2.css:
--------------------------------------------------------------------------------
1 | .primary-bg{background-color:#6064f4}.major-fontColor{color:#3531a8}.minor-fontColor{color:#6064f4}.major-borderTop{border-top:1px solid #6064f4}.major-borderBottom{border-bottom:1px solid #6064f4}.minor-borderTop{border-top:1px solid #dee2ff}.minor-borderBottom{border-bottom:1px solid #dee2ff}.asd{background:#000}
--------------------------------------------------------------------------------
/src/pages/A/A.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | class A extends Component {
4 | constructor(props) {
5 | super(props)
6 | }
7 |
8 | render() {
9 | return (
10 |
11 | aaa
12 |
13 | )
14 | }
15 | }
16 |
17 | export default A
--------------------------------------------------------------------------------
/src/styles/common/utils.less:
--------------------------------------------------------------------------------
1 | .show{
2 | display: block!important;
3 | }
4 | .hide{
5 | display: none!important;
6 | }
7 |
8 | @keyframes bounce-up {
9 | 25% {
10 | transform: translateY(-3px);
11 | }
12 | 50%, 100% {
13 | transform: translateY(1px);
14 | }
15 | 75% {
16 | transform: translateY(-3px);
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/pages/B/B.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | import './Status.less'
4 |
5 | class Status extends Component {
6 | constructor(props) {
7 | super(props)
8 | }
9 |
10 | render() {
11 | return (
12 |
13 | bbbb
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Status
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 |
4 | class App extends Component {
5 | constructor(props) {
6 | super(props)
7 | this.state = {}
8 | }
9 |
10 | render() {
11 | return (
12 |
13 | {this.props.children}
14 |
15 | )
16 | }
17 | }
18 |
19 | export default App
--------------------------------------------------------------------------------
/src/router/router_lazyload.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Loadable from 'react-loadable';
3 |
4 | const A = Loadable({
5 | loader: () => import('../pages/A/A'),
6 | loading:()=> loading...
7 | });
8 | const B = Loadable({
9 | loader: () => import('../pages/B/B'),
10 | loading:()=> loading...
11 | });
12 |
13 |
14 | export {
15 | A,B
16 | }
--------------------------------------------------------------------------------
/dist/static/js/3.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{154:function(n,e,t){"use strict";t.r(e);var r=t(10),u=t.n(r),a=t(11),i=t.n(a),o=t(13),c=t.n(o),s=t(14),l=t.n(s),p=t(15),w=t.n(p),d=t(1),f=t.n(d),h=function(n){function e(n){return u()(this,e),c()(this,l()(e).call(this,n))}return w()(e,n),i()(e,[{key:"render",value:function(){return f.a.createElement("div",null,"aaa")}}]),e}(d.Component);e.default=h}}]);
--------------------------------------------------------------------------------
/src/store/loading_store.js:
--------------------------------------------------------------------------------
1 | import {observable,computed,action} from 'mobx'
2 |
3 |
4 | class loading_store{
5 | @observable show=false
6 |
7 | @action ajaxStart(){
8 | this.show=true
9 | }
10 |
11 | @action ajaxEnd(wait=0){
12 | setTimeout(()=>{
13 | this.show=false
14 | },wait)
15 | }
16 | }
17 |
18 | const loadingStore=new loading_store();
19 |
20 | export default loadingStore
--------------------------------------------------------------------------------
/dist/static/js/2.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{153:function(n,t,e){},155:function(n,t,e){"use strict";e.r(t);var u=e(10),i=e.n(u),r=e(11),o=e.n(r),c=e(13),a=e.n(c),s=e(14),l=e.n(s),b=e(15),f=e.n(b),p=e(1),w=e.n(p),d=(e(153),function(n){function t(n){return i()(this,t),a()(this,l()(t).call(this,n))}return f()(t,n),o()(t,[{key:"render",value:function(){return w.a.createElement("div",null,"bbbb")}}]),t}(p.Component));t.default=d}}]);
--------------------------------------------------------------------------------
/src/components/Header/Header.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/theme/index.less';
2 |
3 | .header{
4 | height:70px;
5 | width:100%;
6 | box-shadow: 0 3px 10px #ccc;
7 | position: relative;
8 | z-index: 3;
9 | >a{
10 | height:60px;
11 | width:180px;
12 | margin-left:20px;
13 | display: inline-block;
14 | position: absolute;
15 | top:50%;
16 | transform: translateY(-50%);
17 | img{
18 | width:100%;
19 | height:100%;
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import Skin from 'components/Skin/Skin'
3 |
4 | import './Header.less'
5 |
6 | class Header extends Component {
7 | constructor(props) {
8 | super(props)
9 | this.state = {}
10 | }
11 | componentDidMount(){
12 |
13 | }
14 | render() {
15 | return (
16 |
17 |
18 |
19 | )
20 | }
21 | }
22 |
23 | export default Header
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 | #*
3 | /__MACOSX
4 |
5 | # history
6 | /.history
7 |
8 | # dependencies
9 | /node_modules
10 | /.pnp
11 | .pnp.js
12 |
13 | # testing
14 | /coverage
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | .env.local
22 | .env.development.local
23 | .env.test.local
24 | .env.production.local
25 |
26 | npm-debug.log*
27 | yarn-debug.log*
28 | yarn-error.log*
29 |
30 | #vscode
31 | .vscode
32 |
33 | #yarn
34 |
35 | #docz
36 | .docz
37 |
38 | .idea
39 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import "@babel/polyfill"
2 | import 'es6-proxy-polyfill'//用来兼容mobx
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import Routers from './router/router'
6 | import { HashRouter as Router, } from 'react-router-dom'
7 | import {Provider} from 'mobx-react'
8 |
9 |
10 | import './styles/common/common.less'
11 |
12 |
13 | if (module.hot) {
14 | module.hot.accept()
15 | }
16 |
17 | ReactDOM.render(
18 |
19 |
20 |
21 |
22 |
23 | ,document.getElementById('root'));
--------------------------------------------------------------------------------
/src/styles/theme/index.less:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 |
4 | //自己定义的主题颜色
5 | .primary-bg{//公用的背景颜色,主色为@primary-6
6 | background-color:@primary-color;
7 | }
8 |
9 | .major-fontColor{//主要的文字颜色：标题等
10 | color:@primary-8;
11 | }
12 |
13 | .minor-fontColor{//次要的文字颜色
14 | color:@primary-color;
15 | }
16 |
17 | .major-borderTop{//主要的上边框
18 | border-top:1px solid @primary-color;
19 | }
20 |
21 | .major-borderBottom{//主要的下边框
22 | border-bottom:1px solid @primary-color;
23 | }
24 |
25 | .minor-borderTop{//次要的上边框,透明度为主色的30%
26 | border-top:1px solid @primary-3;
27 | }
28 |
29 | .minor-borderBottom{//次要的下边框
30 | border-bottom:1px solid @primary-3;
31 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | const path=require('path');
2 | const webpack=require('webpack');
3 | const merge=require('webpack-merge');
4 | const common=require('./webpack.config.common.js');
5 |
6 | module.exports=merge(common,{
7 | mode:'development',
8 | devtool:'cheap-module-eval-source-map',
9 | module:{
10 | rules:[
11 |
12 | ]
13 | },
14 | devServer: {
15 | contentBase: path.join(__dirname, "dist"),
16 | compress: true,//开启gzip压缩
17 | port: 8080,
18 | open:true,
19 | //progress:true,//显示进度条
20 | hot:true,
21 | overlay:true,//错误显示在浏览器上
22 | //historyApiFallback:true//当访问的路径为404的时候跳转
23 | },
24 | plugins:[
25 | new webpack.HotModuleReplacementPlugin(),
26 | ]
27 | })
--------------------------------------------------------------------------------
/src/styles/common/reset.less:
--------------------------------------------------------------------------------
1 | html {overflow-y:scroll;}
2 | body {margin:0; padding:0; font:12px Arial,sans-serif;/*background:#ffffff;*/}
3 | div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
4 | table,td,tr,th{font-size:12px;}
5 | ol,ul {list-style:none;}
6 | li{list-style-type:none;}
7 | img{vertical-align:top;border:0;}
8 | h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
9 | address,cite,code,em,th,i{font-weight:normal; font-style:normal;}
10 | .hx a,.hx em,.fB{font-weight:bold;}
11 | .clearfix{*zoom:1;}
12 | .clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
13 | a {color:#252525; text-decoration:none;}
14 | a:visited {text-decoration:none;}
15 | a:hover {text-decoration:none;}
16 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | import './Loading.less'
4 |
5 | class App extends Component {
6 | constructor(props) {
7 | super(props)
8 | this.state = {}
9 | }
10 |
11 | render() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {this.props.children}
29 |
30 |
33 |
{this.asideDOM=e}}>
89 |
92 |
93 | )
94 | }
95 | }
96 |
97 | export default withRouter(Aside)
--------------------------------------------------------------------------------
/src/components/Skin/Skin.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import {Icon} from 'antd'
3 | import utils from 'utils/usePlugin/utils'
4 | import {withRouter} from 'react-router-dom'
5 |
6 | import './Skin.less'
7 |
8 | class Skin extends Component {
9 | constructor(props) {
10 | super(props)
11 | this.state = {
12 | theme_list:['#405bff','#e57bee','#ff6130','#a9c0ff','#49aa4b','#8ba69c']
13 | }
14 | // this.dropDown=React.createRef();
15 | }
16 | componentDidMount(){
17 | //页面打开保存上次设置的主题思路：将设置的颜色对象值传给后端，在compoentDidMount页面加载的时候去请求后端，然后在请求成功的then里执行
18 | }
19 |
20 | handleDropDown=(e)=>{//点击显示下拉菜单
21 | e.persist();
22 | let dropDown=this.dropDown;
23 | dropDown.style.cssText="opacity:1;top:0px;height:auto;min-height:120px;";
24 | document.body.addEventListener('click',this.judge)
25 | }
26 |
27 | judge=(e)=>{
28 | e=e||window.event;
29 | let target=e.target||e.srcElement;
30 | let dropDown=this.dropDown;
31 | if(dropDown.style.opacity===0){return;}
32 | let flag=utils.judgeDOM(target,this.dropDown);
33 | if(!flag && dropDown){
34 | dropDown.style.cssText="opacity:0;top:-10px;height:0";
35 | }
36 | document.body.removeEventListener('click',this.judge);
37 | }
38 |
39 | themeList=(e)=>{//点击更换皮肤
40 | e=e||window.event;
41 | let target=e.target;
42 | let color;
43 | if(target.tagName.toLowerCase()==='li'){
44 | color=target.getAttribute('data-theme');
45 | window.less.modifyVars(
46 | {
47 | '@primary-color': color,
48 | // '@btn-primary-bg': '#cc753f',
49 | }
50 | )
51 | .then(() => {console.log('success')})
52 | .catch(error => {
53 | console.log(error);
54 | });
55 | }
56 | // ref={(e)=>this.dropDown=e}
57 | }
58 | handleLoginOut=()=>{
59 | this.props.history.push('/login')
60 | }
61 | render() {
62 | return (
63 |
64 |
65 |
66 | Root User
67 |
68 |
this.dropDown=e}>
69 | -
70 |
71 | {
72 | this.state.theme_list.map((item,ind)=>{
73 | return (
74 | -
75 | )
76 | })
77 | }
78 |
79 |
80 | -
81 | Sign out
82 |
83 |
84 |