Weppack (autoprefixer minify et manifest)

Par Eric237, il y a 5 ans

Javascript

Salut, je viens de configurer webpack dans un nouveau projet, le souci c'est que j'ai repris un vielle config d'un projet où j'utilisais weppack 3 et il y'a les plugins

extract-text-webpack-plugin et webpack-manifest-plugin

qui sont depressier.
Depuis hier soir j'ai foulé toutes la doc mais mais rien.
Dans la doc je vois MiniCssExtractPlugin mais cette donc n'est oas du tout claire pour moi.

S'il vous plaît vous avez une nouvelle config (autoprefixer, minify, manifest)?

6 réponses

Mickael Christine, il y a 5 ans

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, il y a 5 ans

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, il y a 5 ans

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, il y a 5 ans

Bonjour merci pour vos reposes.

Eric237, il y a 5 ans

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, il y a 5 ans
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