Forum : Weppack (autoprefixer minify et manifest)

Hello, j'ai un truc pas forcément tres récent pour du webpack 4.42, en espérant que ça puisse t'aider.

    // webpack.dev.js
    const path = require("path");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const webpack = require("webpack");

    module.exports = {
      mode: "development",
      watch: true,
      entry: ["./src/js/app.js", "./src/scss/app.scss"], // tes entry point
      output: {
        path: path.resolve(__dirname, "../public/dist"), // ton folder de destination pour les fichiers minifiés 
        filename: "build.min.js"
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: "build.min.css",
          chunkFilename: "build.min.css"
        }),
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
        })
      ],
      module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["env"]
              }
            }
          },
          {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
          },
          {
            test: /\.(png|jpg|gif|svg|woff2?|eot|ttf)$/,
            use: [{
              loader: "url-loader",
              options: {
                limit: 10000
              }
            }]
          }
        ]
      }
      // webpack.prod.js
      const path = require("path");
      const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
      const MiniCssExtractPlugin = require("mini-css-extract-plugin");
      const webpack = require("webpack");
      const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

      module.exports = {
        mode: "production",
        entry: ["./src/js/app.js", "./src/scss/app.scss"],
        output: {
          path: path.resolve(__dirname, "../public/dist"),
          filename: "build.min.js"
        },
        optimization: {
          minimizer: [
            new UglifyJsPlugin({
              uglifyOptions: {
                output: {
                  comments: false
                }
              }
            }),
            new OptimizeCSSAssetsPlugin({
              cssProcessorPluginOptions: {
                preset: [
                  "default",
                  {
                    discardComments: {
                      removeAll: true
                    }
                  }
                ]
              }
            })
          ]
        },
        plugins: [
          new MiniCssExtractPlugin({
            filename: "build.min.css",
            chunkFilename: "build.min.css"
          }),
          new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
          })
        ],
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["env"]
                }
              }
            },
            {
              test: /\.scss$/,
              use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            },
            {
              test: /\.(png|jpg|gif|svg|woff2?|eot|ttf)$/,
              use: [
                {
                  loader: "url-loader",
                  options: {
                    limit: 10000
                  }
                }
              ]
            }
          ]
        }
      };

      // Dans ton package.json 
        "scripts": {
          "build": "node webpack-config/build.js",
          "dev": "node webpack-config/dev.js"
        },
        // build.js
        const webpack = require("webpack")
        const conf = require("./webpack.prod.js")
        require('shelljs/global')
        const ora = require('ora')
        const spinner = ora('chargement...')

        spinner.start()
        rm('-rf', 'dist')

        webpack(conf, function (err, stats) {
            spinner.stop()
            if (err) throw err
            process.stdout.write(stats.toString({
                colors: true,
                modules: false,
                children: false,
                chunks: false,
                chunkModules: false
            }) + '\n')
        })
        // dev.js
        const webpack = require("webpack");
        const conf = require("./webpack.dev.js");
        require("shelljs/global");
        const ora = require("ora");
        const spinner = ora("chargement...");

        spinner.start();
        rm("-rf", "dist");

        webpack(conf, function(err, stats) {
          spinner.stop();
          if (err) throw err;
          process.stdout.write(
            stats.toString({
              colors: true,
              modules: false,
              children: false,
              chunks: false,
              chunkModules: false
            }) + "\n"
          );
        });

SwaniFR

Bonjour,
Actuellement nous sommes à la version 5 de Webpack.
Si j'ai bien compris :

extract-text-webpack-plugin est remplacé par => mini-css-extract-plugin
webpack-manifest-plugin n'est pas dépressié, il est toujours indiqué dans la nouvelle documentions webpack 5
De plus :
uglifyjs-webpack-plugin n'est plus nécessaire webpack 5 le fait automatiquement (minify) avec le mode en 'development' ou 'production' dans webpack.config.js
autoprefixer est fournit automatiquement avec postcss-loader en passant en option 'postcss-preset-env'

Azorgh

Bonjour Eric,

En effet Webpack 3 commence à dater un peu, et ses packages sont désormais deprecated.

Tu as sur Grafikart.fr une vidéo qui concerne Webpack 4 pour comprendre et faire tes propres configuration.
La version 5 est sortie fin d'année 2020, tu peux aussi aller sur la documentation pour trouver ton bonheur.

Après si tu as un soucis avec une configuration que tu as testé et qui te pose problème, nous te ferons un plaisir de t'aider :)

Eric237

Auteur

Bonjour merci pour vos reposes.

Eric237

Auteur

Je me suis refait toute la doc de nouveau et j'au pure ecrit une nouvelle configuration, mais je me rend compte que les let et const restent meme en prod.

Eric237

Auteur

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const TerserPlugin = require("terser-webpack-plugin");

// const dev = process.env.APP_ENV !== 'production';

const file = "app";
const outputFile = file === "app" ? '' : "/pages";
const publicPath = "/public/assets" + outputFile + "/";
const dev = false;

const plugins = [
    new MiniCssExtractPlugin({
        filename: dev ? '[name].css' : '[name].[chunkhash:5].css',
        chunkFilename: dev ? '[id].css' : '[id].[chunkhash:5].css',
    }),
];

if (dev) {
    plugins.push(new webpack.HotModuleReplacementPlugin());
}

if (!dev) {
    plugins.push(new WebpackManifestPlugin());
}

let config = {

    mode: 'development',

    entry: {
        app: './app/assets/js/' + file + '.js'
    },

    output: {
        path: path.resolve(__dirname, "public/assets" + outputFile),
        filename: dev ? '[name].js' : '[name].[chunkhash:5].js',
        publicPath: publicPath
    },

    devServer: {
        open: true,
        host: 'localhost',
    },

    plugins,

    module: {
        rules: [
            {
                test: /\\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: publicPath,
                        },
                    },
                    {
                        loader: "css-loader",
                        options: {
                          importLoaders: 1,
                        },
                    },
                    'postcss-loader'
                ],
            },
        ],
    },

    devtool: dev ? "eval-cheap-module-source-map" : false,

    optimization: {
        minimize: !dev,
        minimizer: [
            new CssMinimizerPlugin({
                minimizerOptions: {
                    level: {
                        1: {
                            roundingPrecision: 'all=3,px=5'
                        },
                    },

                    preset: [
                        'default',
                        {
                            discardComments: { removeAll: true },
                        },
                    ],
                },
                minify: CssMinimizerPlugin.cleanCssMinify,
            }),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                terserOptions: {
                  ecma: 5,
                  ie8: true,
                  safari10: true,
                },
            }),
        ],
    },
};

module.exports = config;

Ma config actuelle

Weppack (autoprefixer minify et manifest)

5 réponses