Beispiel dafür, wie Webpack JS und CSS verpackt und komprimiert

In diesem Artikel werden hauptsächlich Beispiele dafür vorgestellt, wie Webpack JS und CSS verpackt und komprimiert. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

JS und CSS packen und komprimieren

Da Webpack selbst das UglifyJS-Plug-in (webpack.optimize.UglifyJsPlugin) integriert, um die Komprimierung und Verschleierung von JS und CSS abzuschließen Es ist nicht erforderlich, auf ein zusätzliches Plug-in zu verweisen.

Der Befehl webpack -p bedeutet, dass UglifyJS aufgerufen wird, um den Code zu komprimieren. Es gibt auch viele Webpack-Plug-ins wie html-webpack-plugin, die UglifyJS verwenden standardmäßig.

Die Release-Version von uglify-js unterstützt nur ES5. Wenn Sie ES6+-Code komprimieren möchten, verwenden Sie bitte den Entwicklungszweig.

Die für UglifyJS verfügbaren Optionen sind:

Analyse analysieren

Komprimierung komprimieren

Verstümmeln, Verschleiern

Verschönern Verschönern

minify Minimize // Verwenden Sie

CLI im Plug-in HtmlWebpackPlugin Befehlszeilentool

sourcemap Zuordnung von kompiliertem Code zu Quellcode für Web-Debugging

AST Abstrakter Syntaxbaum

Name Name, einschließlich Variablenname, Funktionsname, Attributname

toplevel Bereich der obersten Ebene

nicht erreichbarer nicht erreichbarer Code

Option Optionen

STDIN Standardeingabe bezieht sich auf die Eingabe von

STDOUT direkt in der Befehlszeile. Standardausgabe

STDERR Standardfehlerausgabe

Nebenwirkungen Funktionsnebenwirkungen, das ist, Funktionen Neben der Rückgabe werden auch andere Effekte erzeugt, z. B. das Ändern der globalen Variablen.

Listen Sie eine Konfiguration auf:

//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
  entry: {
    bundle : './src/js/main.js'
  },
  output: {
    filename: "[name]-[hash].js",
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })

      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: 'url-loader?limit=8192'
      }
    ]
  },
  resolve:{
      extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀
  },

  plugins:[
    new HtmlWebpackPlugin({
      title: 'hello webpack',
      template:'src/component/index.html',
      inject:'body',
      minify:{ //压缩HTML文件
         removeComments:true,  //移除HTML中的注释
         collapseWhitespace:true  //删除空白符与换行符
       }
    }),
    new ExtractTextPlugin("[name].[hash].css"),
    new webpack.optimize.UglifyJsPlugin({
      compress: {   //压缩代码
        dead_code: true,  //移除没被引用的代码
        warnings: false,   //当删除没有用处的代码时，显示警告
        loops: true //当do、while 、 for循环的判断条件可以确定是，对其进行优化
      },
      except: ['$super', '$', 'exports', 'require']  //混淆,并排除关键字
    })
  ]
};

Hierbei ist zu beachten, dass einige Schlüsselwörter während ausgeschlossen werden müssen Komprimierung und kann nicht verwechselt werden, z. B. $ oder require. Wenn es verwechselt wird, wirkt sich dies auf den normalen Betrieb des Codes aus.

Listen Sie einige Eigenschaften auf, die während der Komprimierung häufig auftreten:

1. dead_code – nicht in Anführungszeichen gesetzten Code entfernen

2. loops – Wenn der Die Beurteilungsbedingungen von do, while und for Schleifen können bestimmt und optimiert werden.

3. Warnungen – beim Löschen von nutzlosem Code wird eine Warnung angezeigt

Das Obige habe ich für alle zusammengestellt, ich hoffe, dass es so sein wird hilfreich für alle in der Zukunft. Hilfreich.

Verwandte Artikel:

So verwenden Sie natives Ajax zur Verarbeitung von JSON-Strings

Einführung in 4 gängige Anforderungsmethoden von Ajax in jQuery

Eine schnelle Lösung für die Ajax-Rückgabe des Objektobjekts

Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie Webpack JS und CSS verpackt und komprimiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!