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:
dead_code – nicht in Anführungszeichen gesetzten Code entfernen
loops – Wenn der Die Beurteilungsbedingungen von do, while und for Schleifen können bestimmt und optimiert werden.
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!
