webpack4의 production 모드일 때,
코드가 자동으로 minify된다고 생각했지만, 경우에 따라서는 그렇지 않은 것 같습니다

흩어진 패턴

CSS minify OptimizeCSSAssetsPlugin 설정

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: ["./src/js/index.js"],
  output: {
    filename: "js/main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({filename: 'style/[name].css'}),
  ],
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})],
  },
}

↓build
css의 minify는 되었지만 js의 minify가 되지 않는다…

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
:
:

원인

조사해 보면, optimization.minimizer (을)를 설정하면 기존의 설정을 모두 덧쓰기되기 때문에, minify의 설정은 스스로 하지 않으면 안 되는 것 같습니다.

If you decide to try another minification plugin, just make sure your new choice also drops dead code as described in the tree shaking guide and provide it as the optimization.minimizer.

공식

해결

공식적으로 소개되고 있는 terser-webpack-plugin 를 사용했습니다.
$ npm install terser-webpack-plugin --save-dev

const TerserPlugin = require("terser-webpack-plugin");
:
optimization: {
 minimizer: [
   new TerserPlugin(),
   new OptimizeCSSAssetsPlugin() // CSS の minify を行う
 ]
},

↓build

!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};..

안전하게 minify되었습니다.

공식적으로 마음껏 썼는데…
반성과 함께 투고입니다

webpack이 있으면 gulp라든지 태스크 러너 필요 없어! 라는 것을 인터넷으로 잘 듣는데,
써보고 상당히 길어져 읽고 힘들어 버렸다고 느낍니다.

webpack과 태스크 러너 병용으로 사용해, 알기 쉬운 것이 좋겠다-라고 생각했으므로, 다음은 그것 만들어 보겠습니다