0

Here is my config for webpack production mode.

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]

I am miising something obvious, what wrong I am doing?

simbathesailor
  • 3,681
  • 2
  • 19
  • 30
  • Looks like mode is commented out, so would be running in dev mode correct? `//mode: "production",` And if you are running in dev mode, does your project still output to the build folder? – Joshua Robinson Jun 08 '18 at 06:59
  • yes it is outputting to build folder. so basically the full picture is this. i have one two configs browserconfig and serverconfig . i just removed the browserconfig for now, as browser config is working properly. it just that problem is with server config. It is not outputting anything in build folder – simbathesailor Jun 08 '18 at 06:59
  • Well if mode is commented out then that means you are not using this config? You are using the dev config correct? Which is not what is posted above? – Joshua Robinson Jun 08 '18 at 07:01
  • I have one build.js which explictly import the production config and run it through webpack. so i am importing the correct config for production. WIll adding mode production make a difference – simbathesailor Jun 08 '18 at 07:03
  • Depends on your build process. `process.env.NODE_ENV` is commonly used to toggle which webpack config runs, and some projects do not output to the build folder when in dev mode. One error I see is a spelling error in your minimizer section `compess: { dead_code: true, drop_console: true, },` should be `compress`. – Joshua Robinson Jun 08 '18 at 07:10
  • @stack26 if `mode` is not specified, it uses mode `production` by default! I see several issues here, but perhaps read [this post](https://stackoverflow.com/a/49213048/2581562) first, come back and edit your answer based on the gained insights. But some hints you can start with: `DedupePlugin = deprecated`, `css files` are not entry points ... – Legends Jun 08 '18 at 12:00
  • 1
    Thanks @Legends Thanks for the link . let me go through it. and will come back to it – simbathesailor Jun 08 '18 at 12:28

0 Answers0