HemingPress/webpack.config.js at master · arranf/HemingPress · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
const path = require("path");

const AssetsPlugin = require("assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = (_env, _argv) => {
  return {
    watchOptions: {
      ignored: ["/node_modules/"],
    },
    entry: {
      main: path.join(__dirname, "src", "index.js"),
    },
    optimization: {
      minimizer: [
        new TerserJSPlugin({
          extractComments: false,
          terserOptions: {
            output: {
              comments: false,
            },
          },
        }),
        new OptimizeCSSAssetsPlugin({}),
      ],
    },
    output: {
      filename: "[name].[contenthash].js",
      chunkFilename: "[id].[contenthash].js",
      path: path.resolve(__dirname, "static"),
      publicPath: "/",
    },
    module: {
      rules: [
        {
          test: /\.css?$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
        },
        {
          test: /\.scss$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
        {
          test: /\.js$/,
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
        {
          test: /\.(svg)$/,
          use: [
            {
              loader: "svg-url-loader",
              options: {
                noquotes: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      // Move CSS from JS into it's own CSS bundle
      new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css",
        chunkFilename: "[id].[contenthash].css",
      }),
      // Outputs file in a JSON format readable by Hugo
      new AssetsPlugin({
        filename: "webpack.json",
        path: path.join(__dirname, "data"),
        prettyPrint: true,
        includeAllFileTypes: false,
        fileTypes: ["js", "css"],
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "./src/svg/",
            to: "./svg",
          },
        ],
      }),
    ],
  };
};