Advertisement
Guest User

config/webpack.common.js

a guest
Jan 16th, 2022
181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. "use strict";
  2.  
  3. const SizePlugin = require("size-plugin");
  4. const CopyWebpackPlugin = require("copy-webpack-plugin");
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6.  
  7. const PATHS = require("./paths");
  8.  
  9. // To re-use webpack configuration across templates,
  10. // CLI maintains a common webpack configuration file - `webpack.common.js`.
  11. // Whenever user creates an extension, CLI adds `webpack.common.js` file
  12. // in template's `config` folder
  13. const common = {
  14.     output: {
  15.         // the build folder to output bundles and assets in.
  16.         path: PATHS.build,
  17.         // the filename template for entry chunks
  18.         filename: "[name].js"
  19.     },
  20.     stats: {
  21.         all: false,
  22.         errors: true,
  23.         builtAt: true
  24.     },
  25.     module: {
  26.         rules: [
  27.             // Help webpack in understanding CSS files imported in .js files
  28.             {
  29.                 test: /\.css$/,
  30.                 use: [MiniCssExtractPlugin.loader, "css-loader"]
  31.             },
  32.             // Check for images imported in .js files and
  33.             {
  34.                 test: /\.(png|jpe?g|gif)$/i,
  35.                 use: [
  36.                     {
  37.                         loader: "file-loader",
  38.                         options: {
  39.                             outputPath: "images",
  40.                             name: "[name].[ext]"
  41.                         }
  42.                     }
  43.                 ]
  44.             }
  45.         ]
  46.     },
  47.     plugins: [
  48.         // Print file sizes
  49.         new SizePlugin(),
  50.         // Copy static assets from `public` folder to `build` folder
  51.         new CopyWebpackPlugin({
  52.             patterns: [
  53.                 {
  54.                     from: "**/*",
  55.                     context: "public"
  56.                 }
  57.             ]
  58.         }),
  59.         // Extract CSS into separate files
  60.         new MiniCssExtractPlugin({
  61.             filename: "[name].css"
  62.         })
  63.     ]
  64. };
  65.  
  66. module.exports = common;
  67.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement