webpack配置超详细注释解读

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

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，75人围观）

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

相关阅读

    相关 MemCache超详细解读

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

    你的名字你的名字/ 0 赞/ 274 阅读

    相关 webpack超详细配置

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

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 491 阅读