webpack生产环境配置（详细注释）

• 详细注释

const { resolve } = require('path')
const MiniCssExtractorPlugin = require('mini-css-extract-plugin')
const OptimiziCssAssetsWebpackPlugin = require('optimizi-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 定义node.js的环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production'

// 复用loader的写法
const commonCssLoader = [
	// 这个loader取代style-loader。作用：提取js中的css成单独文件然后通过link加载
	MiniCssExtractPlugin.loader,
	// css-loader：将css文件整合到js文件中
	// 经过css-loader处理后，样式文件是在js文件中的
	// 问题：1.js文件体积会很大2.需要先加载js再动态创建style标签，样式渲染速度就慢，会出现闪屏现象
	// 解决：用MiniCssExtractPlugin.loader替代style-loader
	'css-loader',
	/*
    postcss-loader：css兼容性处理：postcss --> 需要安装：postcss-loader postcss-preset-env
    postcss需要通过package.json中browserslist里面的配置加载指定的css兼容性样式
    在package.json中定义browserslist：
    "browserslist": {
      // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
      "development": [ // 只需要可以运行即可
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ],
      // 生产环境。默认是生产环境
      "production": [ // 需要满足绝大多数浏览器的兼容
        ">0.2%",
        "not dead",
        "not op_mini all"
      ]
    },
  */
	{
		loader: 'postcss-loader',
		options: {
			ident: 'postcss', // 基本写法
			plugins: () => [
				// postcss的插件
				require('postcss-preset-env')(),
			],
		},
	},
]

module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/built.js',
		path: resolve(__dirname, 'build'),
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [...commonCssLoader],
			},
			{
				test: /\.less$/,
				use: [...commonCssLoader, 'less-loader'],
			},
			/*
        正常来讲，一个文件只能被一个loader处理
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
        先执行eslint再执行babel（用enforce）
      */
			{
				/*
          js的语法检查： 需要下载 eslint-loader eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          airbnb(一个流行的js风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import
          设置检查规则：
            package.json中eslintConfig中设置
              "eslintConfig": {
                "extends": "airbnb-base"， // 继承airbnb的风格规范
                "env": {
                  "browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
                }
              }
        */
				test: /\.js$/,
				exclude: /node_modules/, // 忽略node_modules
				enforce: 'pre', // 优先执行
				loader: 'eslint-loader',
				options: {
					// 自动修复
					fix: true,
				},
      },
      /*
        js兼容性处理：需要下载 babel-loader @babel/core
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill
            问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
          3. 需要做兼容性处理的就做：按需加载  --> core-js
      */
			{
				// 第三种方式：按需加载
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
				options: {
          // 预设：指示babel做怎样的兼容性处理
					presets: [
						'@babel/preset-env', // 基本预设
						{
							useBuiltIns: 'usage', //按需加载
							corejs: { version: 3 }, // 指定core-js版本
							targets: { // 指定兼容到什么版本的浏览器
								chrome: '60',
                firefox: '50',
                ie: '9',
                safari: '10',
                edge: '17'
							},
						},
					],
				},
			},
			{
				// 图片处理
				test: /\.(jpg|png|gif)/,
				loader: 'url-loader',
				options: {
					limit: 8 * 1024,
					name: '[hash:10].[ext]',
					outputPath: 'imgs',
					esModule: false, // 关闭url-loader默认使用的es6模块化解析
				},
			},
			// html中的图片处理
			{
				test: /\.html$/,
				loader: 'html-loader',
			},
			// 处理其他文件
			{
				exclude: /\.(js|css|less|html|jpg|png|gif)/,
				loader: 'file-loader',
				options: {
					outputPath: 'media',
				},
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			// 对输出的css文件进行重命名
			filename: 'css/built.css',
		}),
		// 压缩css
		new OptimiziCssAssetsWebpackPlugin(),
		// HtmlWebpackPlugin：html文件的打包和压缩处理
		// 通过这个插件会自动将单独打包的样式文件通过link标签引入
		new HtmlWebpackPlugin({
			template: './src/index.html',
      // 压缩html代码
			minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
				removeComments: true,
			},
		}),
  ],
  // 生产环境下会自动压缩js代码
	mode: 'production',
}

• 带自己的一些理解敲的

const { resolve } = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpacl-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 定义 nodejs 的环境变量： 决定使用 browserslist 的哪个环境（development 或者 production）
process.env.NODE_ENV = 'production'

// 复用 loader
const commonCssLoader = [
  // 'style-loader', 使用 MiniCssExtractPlugin.loader来取代 style-loader
  'MiniCssExtractPlugin.loader',
  'css-loader',
  {
    // 对样式做兼容性处理 使用 postcss-loader
    // 还需在 package.json 中定义 browserslist
    loader: 'postcss-loader',
    options: {
      // 默认配置
      ident: 'postcss',
      // plugins: 指示 postcss 以什么插件进行工作，返回值是一个数组
      plugins: () => [require('postcss-preset-env')()] 
    }
  }
]


module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 处理样式文件
        test: /\.css$/,
        use: [...commonCssLoader ]
      },
      {
        test: /\.less$/,
        use:[...commonCssLoader, 'less-loader']
      },

      /**
       * 正常来讲，一个文件只能被一个 loader 处理
       * 当一个文件要被多个 loader 处理，那么一定要注意指定 loader 的执行先后顺序
       * 比如此处处理 js 文件，先执行 eslint， 再执行 babel
       */
      {
        // 处理js 文件
        // 在 package.json 中 eslintConfig --> 使用的是 atrbnb 规则
        test: /\.js$/,
        // 只检测自己写的源代码，不检测别人写的文件
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          // 修复不符合语法规范的 js 代码
          fix: true
        }
      },
      {
        // 对 js 文件做兼容性处理
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            // 预设： babel 使用什么方式去做兼容性处理
            [
              '@babel/preset-env',  // 只能做一些基本的处理
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定 core-js 的版本
                corejs: { version: 3 },
                // 兼容那些浏览器
                targets: {
                  chrome: '60',
                  firefox: '50'
                }

              }
            ]
          ]
        }
      },

      {
        // 处理图片文件
        test: /\.jpg|pgn|gif$/,
        loader: 'url-loader',
        options: {
          // 对于小于 8kb 以下的图片进行 base64 处理
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          // 关闭 url-loader 的es6 模块化，避免与 html-loader 的 commonjs 冲突
          esModule: false,
          // 防止背景图片丢失
          publicPath: '../image/'
        }
      },

      {
        // 处理 html 文件中的图片问题
        test: /\.html$/,
        // html-loader 专门来处理 html 文件中的图片问题（注意：html-loader 使用的是 commonjs， url-loader 使用的是 es6模块）
        loader: 'html-loader'
      },

      {
        // 处理其他文件
        // file-loader 会原封不动的将文件输出
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          // 其他文件都输出到 media 文件夹下去
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // 将 css 单独抽离出来
    new MiniCssExtractPlugin({
      // 抽离出来的 css 文件重命名
      filename: 'css/built.css'
    }),
    // 压缩 css
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 以指定 html 文件为模板创建新的 html 文件
          // 问题：但处理 html 文件后我们会发现 html 中的图片（img标签引入的图片资源）处理不了
      template: './src/index.html',
      // 压缩 html 文件
      minify: {
        // 压缩空格
        collapseWhitespace: true,
        // 去掉注释
        removeComments: true
      }
    })
  ],
  // js 文件压缩
  mode: 'production'
}