Comment Webpack emballe les fichiers js et css

Cette fois, je vais vous montrer comment webpack emballe les fichiers js et css, et quelles sont les précautions à prendre par webpack pour empaqueter les fichiers js et css. Ce qui suit est un cas pratique, jetons un coup d'œil.

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, cela produit également d'autres effets, tels que la modification de variables globales

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

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

Lecture recommandée :

Comment gérer le passage des paramètres dynamiques de la requête dans vue-router

Comment utiliser Webpack +vue environnement LAN

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!