Webpack配置服务器+客户端:(简称简称）

module.exports = [
  {
    name: "simple-server",
    entry: [path.join(__dirname, "..", "src", "server.js")],
    output: {
      path: path.join(__dirname, "..", "build"),
      filename: "server.js",
      libraryTarget: "commonjs2",
    },
    target: "node",
    externals: [nodeExternals()],
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loaders: ["css", "sass"],
        },
        {
          test: /\.css$/,
          loader: ["css"],
        }
      ],
    },
    resolve: {
      extensions: ["", ".js", ".jsx", ".scss"],
      modulesDirectories: [ "src", "node_modules"],
    },
  },
  {
    name: "simple-client",
    context: path.join(__dirname, "..", "src"),
    entry: {
      app: ["handlers/App", "webpack-hot-middleware/client?path=__webpack_hmr"],
    },
    devtool: "cheap-module-inline-source-map",
    output: {
      path: path.join(__dirname, "..", "build", "assets"),
      filename: "[name].js",
      publicPath: "assets/",
    },
    target: "web",
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loaders: ["style-loader","css-loader?sourceMap","postcss-loader","sass-loader?sourceMap"],
        },
        {
          test: /\.css$/,
          loaders: ["style-loader","css-loader?sourceMap","postcss-loader"],
        }
      ],
    },
    postcss: () => [autoprefixer({ browsers: ["last 5 versions", "> 5%"] })],
    resolve: {
      extensions: ["", ".js", ".jsx", ".scss"],
      modulesDirectories: [
        "src",
        "node_modules",
      ],
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new HtmlWebpackPlugin({
        filename: "app.html",
        template: "templates/main.html",
      })
      new webpack.HotModuleReplacementPlugin(),
    ],
  },
];

样本组件：

import React from "react";
import "Styles.scss";

export default Component extends .... {}

Answer 1

你可以告诉webpack在创建js bundle时为css创建单独的bundle。并在html头中使用它们

<link rel="stylesheet" type="text/css" href="/static/style.css">

（有很多文章表明，在html的头部使用css会更好）。

如何指示webpack分离css：

https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

简而言之：

您必须安装：

npm install extract-text-webpack-plugin --save

将此插件添加到插件列表中：

plugins: [
    new ExtractTextPlugin("style.css")
]

在装载机中：

{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
  test: /\.sass$/,
  loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}

我不确定这是否适用于hmr（重新加载css），因为当我使用hmr时我不需要服务器端渲染。我有两个webpack配置：开发和生产。 dev config使用hmr并且不分离css（一个bundle）并且不提供服务器端。并且生产不使用hmr，分离了css和js以及服务器端渲染。

您可以查看我的配置：

https://github.com/uhlryk/my-express-react-seed

样式不能使用webpack在同构React实现中工作

Webpack配置服务器+客户端:(简称简称）

样本组件：

1 个答案:

简而言之：