webpack配置不在build文件夹中发出css

时间:2018-06-08 06:45:30

标签: reactjs webpack-4

这是我对webpack生产模式的配置。

const serverConfig = {
  //mode: "production",
  optimization: {
    //minimize: true,
    splitChunks: {
      chunks: "async",
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
        // server: {
        //   name: "server",
        //   chunks: "all",
        //   enforce: true,
        // },
        // flightsDesktop: {
        //   name: "flightsDesktop",
        //   test: (m, c, entry = "flightsDesktop") => m.constructor.name === "CssModule" && recursiveIssuer(m) === entry,
        //   chunks: "all",
        //   enforce: true,
        // },
      },
    },
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: true,
          ecma: 6,
          output: {
            comments: false,
          },
          compess: {
            dead_code: true,
            drop_console: true,
          },
        },
        sourceMap: false,
      }),
    ],
  },
  entry: {
    server: path.resolve(__dirname, "../script/server_script.js"),
    flightsDesktop: cssHelper.getFlightsDesktopHomeCss(__dirname),
    hotelsDesktop: cssHelper.getHotelsDesktopHomeCss(__dirname),
    homestaysDesktop: cssHelper.getHomestayDesktopHomeCss(__dirname),
    holidaysDesktop: cssHelper.getHolidayDesktopHomeCss(__dirname),
    flightsAdaptive: cssHelper.getFlightsAdaptiveHomeCss(__dirname),
    hotelsAdaptive: cssHelper.getHotelsAdaptiveHomeCss(__dirname),
    homestaysAdaptive: cssHelper.getHomestayAdaptiveHomeCss(__dirname),
    holidaysAdaptive: cssHelper.getHolidayAdaptiveHomeCss(__dirname),
    experiencesDesktop: cssHelper.getExperiencesDesktopHomeCss(__dirname),
    experiencesAdaptive: cssHelper.getExperiencesAdaptiveHomeCss(__dirname),
    hotelsSEODesktop: cssHelper.getHotelsSEODesktopCss(__dirname),
    hotelsSEOAdaptive: cssHelper.getHotelsSEOAdaptiveCss(__dirname),
    trainsDesktop: cssHelper.getTrainsDesktopHomeCss(__dirname),
    trainsAdaptive: cssHelper.getTrainsAdaptiveHomeCss(__dirname),
  },
  target: "node",
  output: {
    // path: path.join(__dirname, "../build"),
    // filename: "[name].js",
    //libraryTarget: "commonjs2",
    path: path.join(__dirname, "../build"),
    // Generated JS file names (with nested folders).
    // There will be one main bundle, and one file per asynchronous chunk.
    // We don't currently advertise code splitting but Webpack supports it.
    filename: "[name].js",
    //chunkFilename: "static/js/[name].[hash:8].chunk.js",
    // We inferred the "public path" (such as / or /my-project) from homepage.
    publicPath,
  },
  module: {
    rules: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.json$/,
          /\.svg$/,
        ],
        // loader, query and exclude
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "/static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: /\.svg$/,
        loader: "file-loader",
        options: {
          name: "/static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              minimize: true,
            },
          },
          "postcss-loader",
          "sass-loader",
        ],
        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
      },
      {
        test: /\.scss$/,
        use: [
          // MiniCssExtractPlugin.loader,
          {
            loader: "css-loader/locals",
          },
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: { presets: ["react", "es2016", "es2015"], plugins: ["transform-class-properties"] },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin(env),
    //new WriteFilePlugin(),
    // This helps ensure the builds are consistent if source hasn't changed:
    new webpack.optimize.OccurrenceOrderPlugin(),
    // Try to dedupe duplicated modules, if any:
    // new webpack.optimize.DedupePlugin(),
    // Minify the code.
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     screw_ie8: true, // React doesn't support IE8
    //     warnings: false,
    //   },
    //   mangle: {
    //     screw_ie8: true,
    //   },
    //   output: {
    //     comments: false,
    //     screw_ie8: true,
    //   },
    // }),
    //new UglifyJsPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
      path: "static/css/",
    }),
    //new ExtractTextPlugin("static/css/[name].css"),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({
            browsers: [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 9", // React doesn't support IE8 anyway
            ],
          }),
        ],
      },
    }),
  ],
  resolve: {
    modules: ["src", "node_modules"],
  },
}

module.exports = [serverConfig]

我正在弄明显的事情,我在做什么错误?

0 个答案:

没有答案