Explication détaillée des étapes de packaging et de compression de js et css avec webpack

Cette fois, je vais vous apporter une explication détaillée des étapes de packaging et de compression de js et css avec webpack Quelles sont les précautions pour packaging et compression de js et css avec webpack. Voici des cas pratiques, jetons un coup d'oeil.

Emballez et compressez js et css

Puisque webpack lui-même intègre le plug-in UglifyJS (webpack.optimize.UglifyJsPlugin) pour compléter la compression et l'obscurcissement de JS et CSS , il n'est pas nécessaire de référencer un plug-in supplémentaire,

La commande webpack -p signifie appeler UglifyJS pour compresser le code. Il existe également de nombreux plug-ins webpack tels que html-webpack-plugin qui utiliseront UglifyJS. par défaut.

La version commerciale d'uglify-js ne prend en charge que ES5. Si vous souhaitez compresser le code ES6+, veuillez utiliser la branche de développement.

Les options disponibles pour UglifyJS sont :

analyser l'interprétation

compresser la compression

mangle Obscurcir

embellir Embellir

minify Réduire // Utiliser

CLI dans le plug-in HtmlWebpackPlugin Outil de ligne de commande

sourcemap Mappage du code compilé au code source pour le débogage Web

Arbre de syntaxe abstraite AST

nom du nom, y compris nom de la variable, nom de la fonction, nom de l'attribut

portée de niveau supérieur de premier niveau

code inaccessible

option Option

STDIN L'entrée standard fait référence à la saisie de

STDOUT directement sur la ligne de commande Sortie standard

STDERR Sortie d'erreur standard

côté Effets secondaires de la fonction Effets, c'est-à-dire que la fonction a d'autres effets en plus du retour, comme la modification de la variable globale

Liste une configuration :

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

Ce qu'il faut noter ici, c'est qu'elle doit être exclu lors de la compression. Certains mots-clés ne peuvent pas être confondus, comme $ ou require. S'ils sont confus, cela affectera le fonctionnement normal du code.

Liste quelques attributs courants lors de la compression :

1. dead_code -- supprime le code non cité

2. boucles -- Lorsque le les conditions de jugement des boucles do, while et for peuvent être déterminées, optimisez-les.

3. avertissements -- lors de la suppression de code inutile, des avertissements s'affichent

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé Nodejs des méthodes de traitement du cryptage des mots de passe

Résumé de la méthode de transfert de données Vue

Comment confirmer que le rendu ng-repeat est terminé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!