Question

我是用我的代码将我的JavaScript文件与React Router和Webpack 2分开：

export default {
  path: '/',
  component: Container,
  indexRoute: {
    getComponent(location, cb) {
      if (isAuthenticated()) {
        redirect();
      } else {
        System.import('../landing-page/LandingPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
       }
    },
  },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('../login/Login')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
    },
    { /* etc */ 
    }
};

此捆绑包的结果如下：

public/
  vendor.bundle.js
  bundle.js
  0.bundle.js
  1.bundle.js
  2.bundle.js

这意味着最终用户只能获得他/她所需的JavaScript，根据他/她所处的路线。

事情是：对于css部分，我找不到任何资源来做同样的事情，即根据用户的需要拆分CSS。

有没有办法用Webpack 2和React Router做到这一点？

Answer 1

是的，这可以做到。除了CommonsChunkPlugin之外，您还需要ExtractTextPlugin。另外，定义多个入口点

entry: {
    A: "./a",
    B: "./b",
    C: "./c",
},

并配置ExtractTextPlugin以将入口点名称用作CSS文件名

new ExtractTextPlugin({
    filename: "[name].css"
}),

请参阅此处的完整示例：

https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle

Answer 2

虽然我可能不会回答你的问题如何分割css文件以便只加载必要的文件你想要回答问题的方式（没有插件或那种东西），我希望能给你一个可能的选择。

styled-components使用新的ES6功能tagged template literal来设置javascript文件中的组件样式。我认为使用这个库可以解决你只加载必要的css文件的问题，因为本身就没有更多的css文件了。

react-boilerplate chose styled-components over sass，因为

styled-components有更强大的方法：而不是尝试为了给出一种造型语言的程序化能力，它提供了逻辑和配置成JS这些功能属于。

因此，使用styled-components不仅可以解决您只加载必要的css的问题，而且还可以进一步增加应用程序的分离，从而更轻松地测试设计和推理应用程序的原因。

以下是live demo，您可以在其中试用styled-components并查看其工作原理。

CSS代码与Webpack 2和React路由器分离

2 个答案: