webpack配置超详细注释解读

逃离我推掉我的手 2023-03-13 05:53 19阅读 0赞

本篇文章主要是在学习typescript过程中，对webpack的一些配置，做了一些配置项详细注解，光看文章就可以详解了解webpack基本配置项所代表的内容和配置方法，个人学习之余分享出来，仅供参考，欢迎大家指正~  
那么我们开始吧~

const HtmlWebpackPlugin = require('html-webpack-plugin')
    // const CleanWebpackPlugin = require('clean-webpack-plugin') 需要解构，正确方式如下
    const {  CleanWebpackPlugin } = require("clean-webpack-plugin");
    //单线程压缩代码 UglifyJsPlugin
    //ParallelUglifyPlugin 会开启多个子进程，每个子进程还是通过UglifyJS去压缩代码。变成了并行处理该压缩，并行处理多个子任务，效率更高。
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
    
    module.exports = { 
      entry: "./src/index.js", //入口文件
      output: { 
        filename: "main.js" //编译后的文件叫什么
      },
      resolve: { 
        extensions: ['.ts', '.tsx', '.js'] //在import的时候，可以省略后缀：import xxx from './src/index'不必写成 './src/index.js'
      },
      module: { 
        rules: [{ 
          test: /\.tsx?$/, //遇到这些类型的文件，应该使用什么（loader)去解析
          use: 'ts-loader',
          exclude: /node_modules/ //排除某些文件：在编译时，不去处理node_modules下面的文件
        }]
      },
      devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map', //判断是开发还是生产，决定是否使用source-map，来减少打包时间，减少资源浪费
      //webpack-dev-server 也有一些参数可以配置:本地开发服务器配置
      devServer: { 
        open: true, //第一次构建完成后自动打开浏览器
        contentBase: './dist', //开发环境运行时，是基于哪个文件夹作为根目录运行的
        stats: 'errors-only', //webpack启动后在控制台打印哪些信息
        compress: false, //不启用压缩：注意这里的压缩是文件的压缩如gzip等
        host: 'localhost',
        port: 8089
      },
      plugins: [
        new CleanWebpackPlugin({ 
          //build之前清理一下指定路径
          cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({ 
          //编译的时候使用哪个html模板
          template: './src/template/index.html',
          minify: { 
            removeComments: false, // 改为false
            collapseWhitespace: false, // 改为false
            removeAttributeQuotes: false // 改为false
            }
        }),
        new ParallelUglifyPlgin({ 
        	// 使用 ParallelUglifyPlugin 并行压缩输出JS代码
        	//uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。
            //uglifyES：用于压缩 ES6 代码时的配置，Object 类型，直接透传给 UglifyES 的参数。
        	test: /.js$/g, //使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.
    		include: [],//使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
            exclude: [],//使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
    		cacheDir: '',//缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。
    		workerCount: '',//开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。
    		sourceMap: false,//是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的sourceMap发送给网站用户的浏览器。
        	uglifyJS: { 
        		output: { 
        			//是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
        			beautify: false,
        			//是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
    				comments: false
    			},
    			compress: { 
    				dead_code: true,
    				drop_console: false, //删除console.*，默认为不删除
    				//是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用不大的警告
    				warnings: false,
    				//是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 
    				//默认为不转换，为了达到更好的压缩效果，可以设置为false
    				collapse_vars: true,
    				//是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx' 转换成var a = 'xxxx'; x = a; y = a; 
    				//默认为不转换，为了达到更好的压缩效果，可以设置为false
    				reduce_vars: true
    			}
        	}
        })
      ]
    }

补充知识：rocess.env.NODE\_ENV 是从哪里来的  
在 package.json 文件中配置

"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTTPS的加密方式超详细解读

在了解https的加密方式之前，我们需要先行了解两个特别经典的传统加密方式： 1、对称加密 1.1、定义需要对加密和解密使用相同密钥的加密算法。所谓对称，就是采

柔光的暖阳◎/ 2024年02月20日 12:49/ 0 赞/ 63 阅读

相关【HashMap源码解读】（注释版本，超级详细）

目录 1. 属性 2. Node结点类 3. Hash静态方法 4. HashMap构造方法 5. put方法 7. get方法

Love The Way You Lie/ 2023年09月29日 14:40/ 0 赞/ 17 阅读

相关 webpack配置超详细注释解读

本篇文章主要是在学习typescript过程中，对webpack的一些配置，做了一些配置项详细注解，光看文章就可以详解了解webpack基本配置项所代表的内容和配置方法，个人学

逃离我推掉我的手/ 2023年03月13日 05:53/ 0 赞/ 20 阅读

相关 Java 颜色工具类（超详细注释）

颜色工具类（超详细注释）设置属性值自动格式化rgb值和十六进制颜色值。 import java.text.DecimalFormat; import

梦里梦外;/ 2023年01月17日 02:26/ 0 赞/ 128 阅读

相关 C++项目（有注释超详细）

规范代码定义函数或者类尽量放到头文件中，这样不容易出现重复命名和代码冗杂的问题。 pragma once include<iostream>

刺骨的言语ヽ痛彻心扉/ 2022年12月01日 11:49/ 0 赞/ 149 阅读

相关 Eclipse代码注释配置（超详细）

目录 1、eclipse用户名的设置 2、添加模板 3、测试注释 1、eclipse用户名的设置打开Eclipse安装目

亦凉/ 2022年11月14日 14:40/ 0 赞/ 420 阅读

相关 MemCache超详细解读

MemCache是什么? MemCache是一个自由、源码开放、高性能、分布式的分布式内存对象缓存系统，用于动态Web应用以减轻数据库的负载。它通过

你的名字/ 2022年09月29日 02:01/ 0 赞/ 212 阅读

相关 k8s超详细解读

![68df00f4ddd940767e5f0a2d2f82b5c5.png][] 长按上图识别图中二维码????，了解课程详细大纲和内容 Kubernetes

ゞ浴缸里的玫瑰/ 2022年09月04日 01:49/ 0 赞/ 204 阅读

相关 JMX超详细解读（转）

转自：[https://www.cnblogs.com/dongguacai/p/5900507.html][https_www.cnblogs.com_dongguacai

以你之姓@/ 2022年08月29日 11:57/ 0 赞/ 414 阅读

相关 webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项

Myth丶恋晨/ 2021年09月15日 13:14/ 0 赞/ 422 阅读