split webpack config

package.json

@@ -1,17 +1,17 @@
 {
   "name": "rails-webpack-template",
   "private": true,
-  "dependencies": {},
   "scripts": {
-    "dev": "webpack --mode=development --progress",
-    "dev:server": "webpack-dev-server --progress --color --hot",
-    "watch": "webpack --mode=development --progress --watch",
-    "build:production": "webpack --mode=production",
+    "dev": "webpack --mode=development --progress --config webpack.dev.js",
+    "dev:server": "webpack-dev-server --progress --color --hot --config webpack.dev.js",
+    "dev:watch": "webpack --mode=development --progress --watch --config webpack.dev.js",
+    "build": "webpack --mode=production --config webpack.prod.js",
     "eslint": "eslint app/bundle/javascript --ext js",
     "eslint:fix": "eslint app/bundle/javascript --ext js --fix",
     "stylelint": "stylelint app/bundle/stylesheet/**/*.scss",
     "stylelint:fix": "stylelint app/bundle/stylesheet/**/*.scss --fix"
   },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/polyfill": "^7.0.0",
@@ -35,6 +35,7 @@
     "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
-    "webpack-manifest-plugin": "^2.0.4"
+    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-merge": "^4.1.4"
   }
 }

webpack.common.js

@@ -0,0 +1,142 @@
+const glob = require("glob");
+const path = require("path");
+const ManifestPlugin = require("webpack-manifest-plugin");
+// extract css from bundled javascript
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const bundles = path.join(
+  __dirname,
+  "app",
+  "bundles",
+  "javascripts",
+  "entries"
+);
+
+const targets = glob.sync(path.join(bundles, "**/*.{js,jsx,ts,tsx}"));
+const entry = targets.reduce((entry, target) => {
+  const bundle = path.relative(__dirname, target);
+  const filename = path.relative(bundles, target);
+
+  const ext = path.extname(filename);
+
+  return Object.assign({}, entry, {
+    // Input: "application.js"
+    // Output: { "application": "./app/bundles/javascripts/application.js" }
+    [filename.replace(ext, "")]: "./" + bundle
+  });
+}, {});
+
+module.exports = {
+  entry: entry,
+  output: {
+    filename: "js/[name]-[hash].js",
+    chunkFilename: "js/[name].bundle-[hash].js",
+    path: path.resolve(__dirname, "public", "bundles"),
+    publicPath: "/bundles/"
+  },
+  plugins: [
+    new ManifestPlugin({
+      fileName: "manifest.json",
+      publicPath: "/bundles/",
+      writeToFileEmit: true
+    }),
+    new MiniCssExtractPlugin({
+      filename: "style/[name]-[hash].css",
+      chunkFilename: "style/[name].bundle-[hash].css"
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                [
+                  "@babel/preset-env",
+                  {
+                    modules: false,
+                    targets: {
+                      browsers: "> 0.25%"
+                    },
+                    forceAllTransforms: true,
+                    useBuiltIns: "usage"
+                  }
+                ]
+              ],
+              plugins: []
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              minimize: true,
+              // css-loaderの前に噛ませるloaderの数
+              importLoaders: 2
+            }
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: [
+                require("autoprefixer")({ grid: true }),
+                require("postcss-flexbugs-fixes")
+              ]
+            }
+          },
+          {
+            loader: "sass-loader",
+            options: {}
+          }
+        ]
+      },
+      {
+        // 対象となるファイルの拡張子
+        test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
+        // 画像をBase64として取り込む
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 100 * 1024, // 100KB以上だったら埋め込まずファイルとして分離する
+              name: "img/[name]-[hash].[ext]"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /node_modules/,
+          name: "vendor",
+          chunks: "initial",
+          enforce: true
+        }
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      "@js": path.resolve(__dirname, "app/bundles/javascripts"),
+      "@css": path.resolve(__dirname, "app/bundles/stylesheets"),
+      "@image": path.resolve(__dirname, "app/bundles/images")
+    }
+  },
+  performance: {
+    hints: "warning", // default value
+    maxEntrypointSize: 250000, // default value
+    maxAssetSize: 250000 // default value
+  }
+};

webpack.dev.js

@@ -0,0 +1,18 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const path = require("path");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "source-map",
+  devServer: {
+    publicPath: "/bundles/",
+    contentBase: path.resolve(__dirname, "public", "bundles"),
+    host: "0.0.0.0",
+    port: 3035,
+    disableHostCheck: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    }
+  }
+});

webpack.prod.js

@@ -0,0 +1,14 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+// minify css when production
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+// minify js when using optimize-css-assets-webpack-plugin
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "none",
+  optimization: {
+    minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})]
+  }
+});

yarn.lock

@@ -6526,6 +6526,12 @@ webpack-manifest-plugin@^2.0.4:
     lodash ">=3.5 <5"
     tapable "^1.0.0"
 
+webpack-merge@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b"
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"