更改CSS文件后,Webpack 3.5 + React + Postcss不重新编译

时间:2017-09-01 19:03:37

标签: webpack postcss-loader

我遇到了webpack 3.5 +反应+帖子的问题。

配置如下:

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.createElement:type无效 - 期望字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能会从其定义的文件中导出组件。请检查Header的呈现方法。

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

0 个答案:

没有答案