Handling separate dev and prod configs

[powderham]

Hi @ardatan - firstly, thanks a lot for creating this, it's really a great tool.

I have implemented a standard config, I'll write it out at the bottom in case you're interested.

If I want to define certain plugins by environment, such as devtool: "inline-source-map", how do I do that?

I am receiving the error: Cannot read property 'getSourceHash' of undefined (at Object.processFilesForTarget).

My setup is as follows, trying to use the webpack docs alongside yours:

webpack.dev.js

const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common.js");

const clientConfig = merge(common.clientConfig, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
});

const serverConfig = merge(common.clientConfig, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
});

module.exports = [clientConfig, serverConfig];

webpack.prod.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

const clientConfig = merge(common.clientConfig, {
  mode: "production"
});

const serverConfig = merge(common.clientConfig, {
  mode: "production"
});

module.exports = [clientConfig, serverConfig];

webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const meteorExternals = require("webpack-meteor-externals");
const nodeExternals = require("webpack-node-externals");

const clientConfig = {
  entry: "./client/main.jsx",
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "url-loader",
        options: { limit: 10000 }
      },
      {
        test: /\.ttf?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          mimetype: "application/octet-stream"
        }
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          configFile: "./assets/app/babel.config.js"
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".json", ".ts", ".tsx"]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./client/main.html"
    })
  ],
  externals: [meteorExternals()]
};

const serverConfig = {
  entry: ["./server/main.js"],
  target: "node",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          configFile: "./assets/app/babel.config.js"
        },
        exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".json", ".ts", ".jsx", ".tsx"]
  },
  externals: [meteorExternals(), nodeExternals()]
};

module.exports = { clientConfig, serverConfig };

[ardatan]

So you have to tell meteor-webpack which configuration should be used by using WEBPACK_CONFIG_FILE env variable . Otherwise, it will try to import webpack.config.js that doesn't exist in your project :)

https://github.com/ardatan/meteor-webpack#second-option

[powderham]

Hi @ardatan I'm taking a look at this again.

How exactly is one supposed to specify WEBKACP_CONFIG_FILE, like the following?:

"start": "WEBPACK_CONFIG_FILE=\"./webpack.dev.js\" meteor run --settings dev-settings.json",

Edit: I fixed this, the problem was with my specified import (path instead of filename) - it should have been

"start": "WEBPACK_CONFIG_FILE=webpack.dev.js meteor run --settings dev-settings.json",