From 92fd1c22767b58e61a5bace74e376b1b36a7c49e Mon Sep 17 00:00:00 2001 From: pipopotamasu Date: Wed, 28 Nov 2018 23:24:57 +0900 Subject: [PATCH] split webpack config --- package.json | 13 +++-- webpack.common.js | 142 ++++++++++++++++++++++++++++++++++++++++++++++ webpack.dev.js | 18 ++++++ webpack.prod.js | 14 +++++ yarn.lock | 6 ++ 5 files changed, 187 insertions(+), 6 deletions(-) create mode 100644 webpack.common.js create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js diff --git a/package.json b/package.json index cb4bef7..1a8d7d1 100644 --- a/package.json +++ b/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" } } diff --git a/webpack.common.js b/webpack.common.js new file mode 100644 index 0000000..df59405 --- /dev/null +++ b/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 + } +}; diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000..248ebc4 --- /dev/null +++ b/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": "*" + } + } +}); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000..7af4371 --- /dev/null +++ b/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({})] + } +}); diff --git a/yarn.lock b/yarn.lock index cb5d31e..598e315 100644 --- a/yarn.lock +++ b/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"