1

我遇到了 webpack 3.5 + react + posts 的问题。

配置是这样的：

const path = require( "path" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const CopyWebpackPlugin = require( "copy-webpack-plugin" );
const ManifestPlugin = require( "webpack-manifest-plugin" );
const webpack = require( "webpack" );
const env = process.env.MIX_ENV || "dev";
const isProduction = ( env === "prod" );

module.exports = {
  entry: {
    app: [ "./web/static/css/app.css", "./web/static/js/app.jsx" ],
    vendor: [ "react", "react-dom", "highcharts", "moment", "axios", "react-table",
      "redux", "react-router", "raven-js" ]
  },
  output: {
    path: path.resolve( __dirname, "priv/static/" ),
    filename: "js/[name].js"
  },
  devtool: "source-map",
  resolve: {
    extensions: [ ".js", ".jsx", ".css", ".png", ".svg", ".gif", ".jpeg", ".jpg", ".eot", ".ttf", ".woff", ".woff2" ],
    modules: [
      "web/static",
      "node_modules"
    ]
  },
  resolveLoader: {
    modules: [ "node_modules" ]
  },
  module: {
    rules: [
      {
        test: /\.(eot|ttf|woff|woff2)$/i,
        use: [ {
          loader: "file-loader",
          options: {
            outputPath: "../static/fonts/",
            publicPath: "../fonts/",
            name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
          }
        } ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              outputPath: "../static/images/",
              publicPath: "images/",
              limit: 8000, // Convert images < 8kb to base64 strings
              name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(css)$/,
        use: ExtractTextPlugin.extract( {
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: isProduction,
                importLoaders: 1
              }
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: [
                  require( "stylelint" )(),
                  require( "precss" )(),
                  require( "autoprefixer" )()
                ],
                sourceMap: true
              }
            }
          ]
        } )
      }, {
        test: /\.(js|jsx)$/,
        include: /js/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      } ]
  },
  plugins: [
    new CopyWebpackPlugin( [ {
      from: "./web/static/assets"
    } ] ),
    new webpack.ContextReplacementPlugin( /moment[\/\\]locale$/, /pt-br/ ),
    new ExtractTextPlugin( "css/app.css" ),
    new webpack.optimize.CommonsChunkPlugin( {
      name: "vendor",
      filename: "js/vendor.bundle.js"
    } )
  ]
};

资产的第一次编译非常完美，如果我更改了一些 JS 或 JSX 文件，重新编译就会成功。但是，在更改任何 CSS 文件后，react 组件将中断。

警告：React.createElement：类型无效 - 预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能会从定义组件的文件中导出组件。检查Header.

如果我使用 webpack 2.7 它工作正常。

4

0 回答 0