Webpack - 仅在开发包中包含css(非生产)

时间:2016-05-10 19:35:40

标签: reactjs webpack webpack-dev-server

当我创建我的生产包时,我不需要javascript中的任何样式表,它们都包含在index.html中。样式表使用从sass到bundle.css的grunt手表编译。

开发时我使用webpack dev服务器。现在我想在javascript包中包含css以进行热模块替换,但是而不更改任何现有的javascript文件

开发服务器使用专用的index.html和webpack.config文件,因此最好包含css包。这可能吗?

也许值得一提的是我使用了React。

1 个答案:

答案 0 :(得分:2)

  1. 答案:您似乎可以更改entry[] webpack.config的{​​{1}},以访问其他.js文件。尝试为各自的.js文件创建引用两个不同的webpack.config条目文件,为import不同的CSS文件创建引用文件,或完全省略import行。这会损害DRY,但会做你想要的。

  2. React应该没有任何区别。

  3. 热模块是红鲱鱼;它是作为插件实现的,与上述无关:

    plugins: [
    ...
        new webpack.HotModuleReplacementPlugin());
    ],
    
  4. webpack.config.dev中省略CSS模块加载器将无效。

    module: {
      loaders: [
    ...
        {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
      ]
    }
    

    因为它会导致import 'path/to/my.css'

  5. index.js中的解析错误