Comment implémenter l'empaquetage et la compression CSS webpack4

Cette fois, je vais vous montrer comment implémenter le packaging et la compression webpack4 css, et quelles sont les précautions pour implémenter le packaging et la compression webpack4 css. Voici des cas pratiques, jetons un coup d'oeil.

// webpack.config.js
module.exports = {
  // webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题
  mode: 'development' // production
}

Mais comment empaqueter le css séparé du js ?

Je recherche des articles pertinents depuis une journée. Beaucoup d'entre eux disent que webpack prend automatiquement en charge la compression CSS, et certains disent qu'un plug-in est requis. Oui, utilisez simplement un plug-in

.

optimize-css-assets-webpack-plugin
Mais assurez-vous de visiter le site officiel de Npm

⚠️ Pour webpack v3 ou inférieur, veuillez utiliser optimise-css-assets-webpack-plugin@3.2. 0. La version optimise-css-assets-webpack-plugin@4.0.0 et supérieure prend en charge webpack v4.

La méthode consiste à d'abordinstaller optimiser-css-assets-webpack-plugin

const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {  
  .....,
  //
  plugins: [
    new optimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    }),
  ],
  // 这个还待研究，看字面意思是优化的意思
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],
  }  
}

J'ai également lu le code ci-dessus écrit par d'autres, vous devez donc installer un package 'cssnano'

puis exécuter la commande d'empaquetage de l'environnement de production Oh, le CSS l'est bien. compressé, mais en regardant le js, il n'est pas compressé. Sans le code ci-dessus, le js est effectivement compressé par défaut, j'ai donc cherché une solution sur Internet, ils ont dit que webpack4 n'avait besoin que de définir le mode production, mais maintenant il y a un problème. Après avoir compressé le css, le js ne sera pas compressé, j'ai donc continué à installer le js compressé avec l'intention de l'essayer Le plug-in uglify-webpack-plugin

J'ai finalement découvert que le problème était résolu. C'est juste mon expérience et une erreur. Mais si vous avez une bonne solution, laissez un message et progressez ensemble pour bien comprendre Webpack !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du tampon Node.js

Comment utiliser JS pour appeler une caméra locale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!