So implementieren Sie Webpack4-CSS-Paketierung und -Komprimierung

Dieses Mal zeige ich Ihnen, wie Sie die Webpack4-CSS-Verpackung und -Komprimierung implementieren und welche Vorsichtsmaßnahmen für die Implementierung der Webpack4-CSS-Verpackung und -Komprimierung gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

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

Aber wie verpackt man das CSS getrennt vom JS?

Ich habe einen Tag lang nach relevanten Artikeln gesucht. Viele von ihnen sagen, dass Webpack automatisch die CSS-Komprimierung unterstützt, und einige sagen, dass ein Plug-In erforderlich ist

optimize-css-assets-webpack-plugin
Besuchen Sie aber unbedingt die offizielle Npm-Website

⚠️ Für Webpack v3 oder niedriger verwenden Sie bitte activate-css-assets-webpack-plugin@3.2.0 . Die Version „optimize-css-assets-webpack-plugin@4.0.0“ unterstützt Webpack v4.

Die Methode besteht darin, zuerstoptimize-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({})],
  }  
}

Ich habe auch den obigen Code gelesen, der von anderen geschrieben wurde, also müssen Sie ein „cssnano“-Paket installieren

und dann den Befehl zum Verpacken der Produktionsumgebung ausführen. Oh ja, das CSS ist tatsächlich komprimiert. Aber wenn man sich das js ansieht, ist es nicht komprimiert. Wenn der obige Code nicht hinzugefügt wird, ist js tatsächlich der Standard. Daher habe ich im Internet nach einer Lösung gesucht. Sie sagten, dass webpack4 nur den Produktionsmodus festlegen muss Nach dem Komprimieren des CSS wird das JS nicht komprimiert, daher habe ich das vorherige Plug-in zum Komprimieren von JS weiter installiert, um es auszuprobieren

Schließlich habe ich festgestellt, dass das Problem nur meine Erfahrung und ein Fehler ist. Wenn Sie jedoch eine gute Lösung haben, hinterlassen Sie bitte eine Nachricht und machen Sie gemeinsam Fortschritte, um Webpack gründlich zu verstehen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung des Node.js-Puffers

Wie man JS verwendet, um eine lokale Kamera aufzurufen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Webpack4-CSS-Paketierung und -Komprimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!