webpck多页移动端h5项目

详细项目建立过程

1. package.json生成: npm init,脚本里写启动webpack推荐的web服务器(未热更新)
2. 书写webpack.dev.conf文件,首先就是多入口:entrys,用到了glob对象来找多个文件夹下的entry.js
3. 书写多入口的根html插件,最重要的就是找到pages/*.html当插件的字段template
4. dva集成了redux,需要注册路由和models(入口文件不需要export)
5. 注册models需要用到require.context获取多个model文件的上下文
6. model里用到了插件,安装antd-mobile和axios,书写alias
7. 路由里是react的jsx写法，需要babel来翻译,尝试加上module.rules用babel-loader来处理.js文件,但loader并不起翻译的作用,需要安装对应版本的@babel/core(都只是开发用到所以用开发依赖安装)
8. 接着会报错：Support for the experimental syntax ‘dynamicImport’ isn’t currently enabled (目前尚未启用对实验语法’dynamicImport’的支持),指的是不能使用动态路由(import()方法的语法),此时可以用babel的插件plugin-syntax-dynamic-import,需要新建.babelrc文件了
9. 此时矛头会直指说不认识这个东西，因为这需要将react里的JSX 转换为函数，还需要一个@babel/preset-react预设（虽然不理解啥叫预设,暂时理解成dva注册的路由需要一个返回值，恰好是react用jsx写的实际是一个对象,程序编译到了注册这一步时预设需要把jsx转成对象，而不是打包出来是jsx,运行时再翻译成对象）,.babelrc写上:“presets”: ["@babel/preset-react"]
10. 此时跑react的组件的时候，又报错了: Support for the experimental syntax ‘classProperties’ isn’t currently enabled,没办法，babel太折腾人了，也不知道用了什么新特性。。npm install -D @babel/plugin-proposal-class-properties吧。.babelrc加上plugin: “@babel/plugin-proposal-class-properties”
11. 程序因为svg文件不能解析,module.rules加上file-loader
12. 不能解析.less文件,module.rules加上less和less-loader,之前需要调用style-loader和css-loader,且css-loader加上options,modules:1,importLoaders:1,localIdentName:"[local]_[hash:base64:4]"
13. 不能解析.js文件里面的引用的less变量名,less规则加上：javascriptEnabled
14. css是一个大学问，可以用postCss-loader来加浏览器厂商前缀插件autoprefixer
15. 程序跑起来了，但访问不到之前配置的多页，404了,那肯定是web服务器不对，思考下入口js设置对了，对应的page也对了，那一定是路径问题，加上devServer加上：publicPath:’/’,且output的publicPath应该是/，加上调试方便的：devtool: ‘cheap-module-source-map’
16. 接着会报错：Uncaught Error: [HMR] Hot Module Replacement is disabled,需要脚本加上:–hot --inline
17. 接着报错:Uncaught TypeError: r.key is not a function,问题出现在了getOwnPropertySymbols（es6语法） 这才反应过来，babel能做到的polyfill（浏览器不支持的es6写法）怎么不起作用了？没有加上Babel-presets
18. 加上了babel-presets无济于事,查看下时哪个module的问题(object-assign),尝试安装object-assign,且写上代码：Object.assign = require(‘object-assign’)，无果
    发现是models/index.js写法有问题，改写之
19. 报错： Uncaught ReferenceError: regeneratorRuntime is not defined, 发现用了await的地方都错了，加上对应版本的babel-plugin-transform-runtime
20. 报错： Cannot assign to read only property ‘exports’ of object ‘#’, 发现用了commonjs的导出：module.export={…},需要改写成es6：export default
21. React is not defined 在每个文件都要写上react的引用是很麻烦的,这就需要了解webpack的externals作用了,好吧这个没有作用，还是要用插件

    new webpack.ProvidePlugin({
      'React': 'react',
    })

跑起来后

1. 跑起来了呢
2. 如果想要加上px-to-rem,需要对less,css都加上插件(难点)
3. 加上代理后端请求devServer.proxy
4. 打包问题：没有把css样式抽离,需要插件
5. 打包问题：多页没有分多个文件夹,如果需要生成所有的js都在js文件夹，需要改写output.filename->‘name.js’=>‘js/name.js’
6. 打包问题：每次打包并没有删除dist文件夹, 需要插件
7. 打包问题：并没有提取公共js和css
8. 打包问题： antd-mobile其实并没有真正打包成高清方案，仅仅是把px变成了rem,需要babel-plugin-import,而且按照官方还需要修改less的变量。。。可以说是很复杂了,而且会带来别的问题： 多页打包，未必是所有页面都需要这种高清方案，一旦有一个页面不需要这个方案，怕是配置要再写一份（改动到：less-loader.option.modifyVar;.babelrc;package.json）
9. 不过有改进的是采用了官方推荐的按需加载，就是说用到的组件才会加载样式，不像以前需要导入所有的样式了
10. 如果有可能的话，把配置单独提取出来，方便维护

待解决的问题

1. px-to-rem虽然生效了，但是问题是多页是否都需要rem的方案，例如pc页面源生构建应该不需要rem方案，如此一来多页就需要多个module.rules.css.js了，问题待解决
2. 最终还是用mini-css-extract-plugin解决了webpack4的打包css所有模块的问题，但开发模式应不需要这么频繁的打包，还是想用style-loader，这样一来等于打包和开发两种模式的css-loader方式不同，需要两份module.rules.css.js了，问题待解决
3. 公共js虽然可以提取了，但是问题是多页是否都需要这份公共js,例如用vue构建就需要两份不同的公共js了，问题待解决

以上问题带来的思考

• 是否还是需要webpack.common.conf.js,多页带来的问题，基本不可能用相同的配置，抽离公共配置似乎不现实也没有必要
• 多页带来的问题告诉我，如果真的要兼容到vue构建，react构建，pc页面源生多种情况，就没有必要用一个项目来捆绑所谓的多页了，我应该对此项目有一个清楚的定位：一个基于react,且需要rem布局，且使用了antd-mobile组件库的多个移动端页项目

2/12新增问题：dva1搬运到dva2过程

• 不再使用IndexRoute,而是用Route 的exact属性实现嵌套路由react-router v3到v4的变化 https://css-tricks.com/react-router-4/

2/12新增问题：css module 问题，多页不能统一使用module的话，多页将毫无意义

• 将把不是module的页面（如customer-manager）使用module,拓展学习：http://www.alloyteam.com/2017/03/getting-started-with-css-modules-and-react-in-practice/

2/13新增问题：eslint还没有

2/13新增问题： css module和多主题颜色的冲突,解决：(有关主题都应该是全局的，如果有元素既要hash类也要主题，那就是两个类：主题类+modules类)

2.14解决: 由于webpack-dev-server结合html-webpack-plugin的构建速度受到多页打包编辑的影响，开发时最好只开发当前页,见build/htmlWebpackPluginList:5