webpack 搭建多页面打包架构

图片路径问题

• html引入的图片放置在 根目录中的static文件下，通过copy-webpack-plugin直接拷贝到 dist/static中
• js和css引入的图片防止在src中，通过url-loader对文件进行转换到dist/static中，文件名称会带上[hash],可以通过[hash]判断图片的来源、
• 可以设置url-loader来开始进行图片转base64的操作

项目的目录结构

   ├── package.json                                 // package.json
   ├── webpack.config.js                            // webpack文件
   ├── postcss.config.js                            // postcss文件
   ├── README.md                                    // 文档
   ├── index.html                                   // 多页面入口文件
   ├── app.html                                     // 多页面入口文件
   ├── build                                        // express服务器
   │   ├── app.js                                   // express服务器入口
   │   └──  proxy.config.js                         // 访问带你配置   
   ├── src                                          // 源码目录
   │   ├── app.js                                   // 多页面js入口文件
   │   ├── index.js                                 // 多页面js入口文件   
   │   ├── images  
   │   ├── css                                  
   │   └── other 
   ├── static                                       // 静态资源
   │   ├── js
   │   ├── images  
   │   ├── css                                  
   │   └── other 
   ├── dist                                         // 编译结果
   │   ├── index.html
   │   ├── app.html 
   │   └── static                                   // 静态资源 + 源码
   │       ├── js
   │       ├── images  
   │       ├── css                                  
   │       └── other                                   
   └── node_modules                                 // 包管理

Express 服务器

添加了express服务器使前后开发分离

• express.static('dist') 静态资源管理
• express.Router() 接口路由管理
• httpProxyMiddleware() 代理管理