Nesho•7y ago

```js // webpack.common.js const path = require("path"); const HtmlWebpackPlugin = require("html-web

// webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.tsx",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: "source-map",
  resolve: {
    alias: {
      shared: path.resolve("../shared")
    },
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" },
      { test: /\.css$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }] }
    ]
  }
};

// webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.tsx",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: "source-map",
  resolve: {
    alias: {
      shared: path.resolve("../shared")
    },
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" },
      { test: /\.css$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }] }
    ]
  }
};

9 Replies

NeshoOP•7y ago

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

module.exports = merge(common, {
  mode: "development",
  devServer: {
    hot: true,
    historyApiFallback: true,
    compress: true,
    port: 3000,
    contentBase: "./dist"
  }
});

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

module.exports = merge(common, {
  mode: "development",
  devServer: {
    hot: true,
    historyApiFallback: true,
    compress: true,
    port: 3000,
    contentBase: "./dist"
  }
});

Do you have dev server set up? If not, that's a good place to start

Unknown User•7y ago

Message Not Public

NeshoOP•7y ago

Docs is a good place to start then What helped me was to read about entries outputs dev server Those are really the 3 things you need to get started with a simple config

Unknown User•7y ago

Message Not Public

NeshoOP•7y ago

That's when you run what?

NeshoOP•7y ago

Unknown User•7y ago

Message Not Public

NeshoOP•7y ago

You want to lift it? I sent my webpack configs earlier @itsnotyalc You want to move the child object up to the parent?

Unknown User•7y ago

Message Not Public

```js // webpack.common.js const path = require("path"); const HtmlWebpackPlugin = require("html-web

Did you find this page helpful?