How webpack packages js and css files

This time I will show you how webpack packages js and css files, and what are the precautions for webpack to package js and css files. The following is a practical case, let's take a look.

Packaging and compressing js and css

Since webpack itself integrates the UglifyJS plug-in (webpack.optimize.UglifyJsPlugin) to complete the compression and obfuscation of JS and CSS, there is no need to reference additional Plug-in,

The command webpack -p means calling UglifyJS to compress the code. There are also many webpack plug-ins such as html-webpack-plugin that will use UglifyJS by default.

The release version of uglify-js only supports ES5. If you want to compress ES6 code, please use the development branch.

The options available for UglifyJS are:

parse Interpretation

compress Compression

mangle Obfuscation

beautify Beautify

minify Minimize //Use

CLI in the plug-in HtmlWebpackPlugin Command line tool

sourcemap Mapping of compiled code to source code, used for web page debugging

AST Abstract syntax tree

name Name, including variable name, function name, attribute name

toplevel Top-level scope

unreachable unreachable code

option Option

STDIN Standard input refers to inputting directly in the command line

STDOUT Standard output

STDERR Standard error output

side effects Function side effects, that is, functions In addition to returning, it also produces other effects, such as changing the global variable

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

How to handle the dynamic parameter passing of query in vue-router

How to use webpack vue environment LAN

The above is the detailed content of How webpack packages js and css files. For more information, please follow other related articles on the PHP Chinese website!