Exemple de la façon dont Webpack emballe et compresse js et css

Cet article présente principalement des exemples de la façon dont webpack emballe et compresse js et css. Maintenant, je le partage avec vous et le donne comme référence.

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 Nom, y compris le nom de la variable, le nom de la fonction, le nom de l'attribut

toplevel Portée de niveau supérieur

code inaccessible inaccessible

option Options

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

effets secondaires Effets secondaires de la fonction, qui c'est-à-dire des fonctions En plus de renvoyer, il produit également d'autres effets, comme changer la variable globale

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

Il convient de noter ici que certains mots-clés doivent être exclu lors de la compression et ne peut pas être confondu, comme $ ou require, s'il est confondu, 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, un avertissement s'affiche

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas utile à tout le monde à l’avenir. Utile.

Articles connexes :

Comment utiliser l'ajax natif pour traiter les chaînes json

Introduction à 4 méthodes de requête courantes d'ajax dans jQuery

Une solution rapide pour renvoyer l'objet ajax Object

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!