Webpack-Paket und Komprimierung von JS- und CSS-Tutorial-Anweisungen

Dieses Mal bringe ich Ihnen die Tutorial-Anweisungen für die Webpack-Verpackung und -Komprimierung von JS und CSS. Was sind die Vorsichtsmaßnahmen für die Webpack-Verpackung und -Komprimierung von JS und CSS? Schauen Sie mal rein.

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

Abstrakter AST-Syntaxbaum

Name, einschließlich Variablenname, Funktionsname, Attributname

Top-Level-Top-Level-Bereich

nicht erreichbarer, nicht erreichbarer Code

Option Option

STDIN Standardeingabe bezieht sich auf die Eingabe von

STDOUT direkt auf der Befehlszeile. Standardausgabe

STDERR Standardfehlerausgabe

Seite Auswirkungen der Funktion Nebenwirkungen, das heißt, die Funktion hat neben der Rückgabe noch andere Auswirkungen, 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']  //混淆,并排除关键字
    })
  ]
};

Hier sind einige wichtige Punkte zu beachten müssen während der Komprimierung ausgeschlossen werden. Wörter wie $ oder require können nicht verwechselt werden, da dies Auswirkungen auf den normalen Betrieb des Codes hat.

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 werden Warnungen angezeigt

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So deaktivieren Sie die Eslint-Code-Überprüfung im Vue-Projekt

Vue.js+Flask erstellt eine einzelne Seite APP-Fall Ausführliche Erklärung (mit Code)

Das obige ist der detaillierte Inhalt vonWebpack-Paket und Komprimierung von JS- und CSS-Tutorial-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!