Webpack && React

本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~

Using Webpack in React

参考资料：
中文版：react-webpack-cookbook
英文版：webpack book

hot module replacement

• 使用webpack-dev-server实现热更新，观察除webpack.config.js外的文件；css文件更新可以免刷新
• 使用nodemon观察webpack.config.js，webpack配置文件一更新，则重新编译；命令行：nodemon --watch webpack.config.js --exec \"webpack-dev-server --mode development\""

compose configuration

• 有多种方式管理webpack配置
• 可以采用将 webpack.config.js 分割成多个小文件来实现配置管理
• 可以达到方便管理、多项目共用的好处

loading style

• css-loader 处理样式文件之间的引用关系，如 url() @imports，translates CSS into CommonJS；
• style-loader 生成样式树，creates style nodes from JS strings；
• loading的顺序是：从右到左，从下到上 ==》 loaders: [“style-loader”, “css-loader”] can be read as styleLoader(cssLoader(input)).

separating style

• Flash of Unstyled Content (FOUC)，html骨架和内容先显示，随后加上样式
• 使用
• OptimizeCSSAssetsPlugin 可用来压缩css文件，只有在 mode 为 production 时有效