webpack配置超详细注释解读

本篇文章主要是在学习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",