Wie Webpack JS- und CSS-Dateien verpackt

Dieses Mal zeige ich Ihnen, wie Webpack JS- und CSS-Dateien verpackt und welche Vorsichtsmaßnahmen für Webpack zum Packen von JS- und CSS-Dateien gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 globaler 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']  //混淆,并排除关键字
    })
  ]
};

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Dinge finden Sie unter PHP Chinesisch. Andere verwandte Artikel online!

Empfohlene Lektüre:

So handhaben Sie die dynamische Parameterübergabe von Abfragen im Vue-Router

So verwenden Sie Webpack +vue-Umgebung LAN

Das obige ist der detaillierte Inhalt vonWie Webpack JS- und CSS-Dateien verpackt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!