thomas-claireau/PHP-P5-Openclassrooms

View on GitHub
public/_webpack/webpack.config.js

Summary

Maintainability
B
5 hrs
Test Coverage
const path = require("path");
const webpack = require("webpack");

const MiniCssExtractWebpackPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const NonJsEntryCleanupPlugin = require("./non-js-entry-cleanup-plugin");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");

const {
  context,
  entry,
  devtool,
  outputFolder,
  publicFolder
} = require("./config");

const HMR = require("./hmr");
const getPublicPath = require("./publicPath");

module.exports = (options) => {
  const { dev } = options;
  const hmr = HMR.getClient();

  return {
    mode: dev ? "development" : "production",
    devtool: dev ? devtool : false,
    context: path.resolve(context),
    entry: {
      "css/main": dev ? [hmr, entry.styles] : entry.styles,
      "js/main": dev ? [hmr, entry.scripts] : entry.scripts
    },
    output: {
      path: path.resolve(outputFolder),
      publicPath: getPublicPath(publicFolder),
      filename: "[name].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)\/(?!(dom7|ssr-window|swiper)\/).*/,
          use: [
            ...(dev ? [{ loader: "cache-loader" }] : []),
            { loader: "babel-loader" }
          ]
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            ...(dev
              ? [
                { loader: "cache-loader" },
                { loader: "style-loader", options: { sourceMap: dev } }
              ]
              : [MiniCssExtractWebpackPlugin.loader]),
            { loader: "css-loader", options: { sourceMap: dev } },
            {
              loader: "postcss-loader",
              options: {
                ident: "postcss",
                sourceMap: dev,
                config: { ctx: { dev } }
              }
            },
            { loader: "resolve-url-loader", options: { sourceMap: dev } },
            {
              loader: "sass-loader",
              options: { sourceMap: true, sourceMapContents: dev }
            }
          ]
        },
        {
          test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico|mp4|webm)$/,
          use: [
            ...(dev
              ? [
                {
                  loader: "file-loader",
                  options: {
                    name: "[path][name].[ext]"
                  }
                }
              ]
              : [
                {
                  loader: "file-loader",
                  options: {
                    name: "../dist/[path][name].[ext]"
                  }
                }
              ])
          ]
        }
      ]
    },
    plugins: [
      ...(dev
        ? [
          new webpack.HotModuleReplacementPlugin(),
          new FriendlyErrorsWebpackPlugin(),
          new CleanWebpackPlugin([path.resolve(outputFolder)], {
            allowExternal: true,
            beforeEmit: true
          })
        ]
        : [
          new MiniCssExtractWebpackPlugin({
            filename: "[name].css"
          }),
          new NonJsEntryCleanupPlugin({
            context: "css",
            extensions: "js",
            includeSubfolders: true
          }),
          new CleanWebpackPlugin([path.resolve(outputFolder)], {
            allowExternal: true,
            beforeEmit: true
          }),
          new CopyWebpackPlugin(
            [
              {
                from: path.resolve(`${context}/**/*`),
                to: path.resolve(outputFolder)
              }
            ],
            {
              ignore: ["*.js", "*.ts", "*.scss", "*.css"]
            }
          )
        ]),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ]
  };
};