lyz自学笔记

前言

生产环境配置

提示：以下是本篇文章正文内容，下面案例可供参考

一、生产环境开发

1、开发环境就是将解析js、css、html等资源的打包的汇总

	//处理绝对路径
	const { resolve } = require('path');
	//提取css使用文件打包成一个单独的css文件
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
	//压缩css文件
	const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
	//解析html文件，自动生成html
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	
	// 定义nodejs环境变量：决定使用browserslist的哪个环境
	process.env.NODE_ENV = 'production';
	
	// 复用loader，用于解决css兼容性的问题
	const commonCssLoader = [
	  MiniCssExtractPlugin.loader,
	  'css-loader',
	  {
	    // 还需要在package.json中定义browserslist
	    loader: 'postcss-loader',
	    options: {
	      ident: 'postcss',
	      plugins: () => [require('postcss-preset-env')()]
	    }
	  }
	];
	
	module.exports = {
	  entry: './src/js/index.js',
	  output: {
	    filename: 'js/built.js',
	    path: resolve(__dirname, 'build')
	  },
	  module: {
	    rules: [
	      {
	        // 在package.json中eslintConfig --> airbnb
	        test: /\.js$/,
	        exclude: /node_modules/,
	        // 优先执行
	        enforce: 'pre',
	        loader: 'eslint-loader',
	        options: {
	          fix: true
	        }
	      },
	      {
	        // 以下loader只会匹配一个
	        // 注意：不能有两个配置处理同一种类型文件，所有将esline处理js语法的提取到oneOf外面
	        one0Of: [
	          {
	            test: /\.css$/,
	            use: [...commonCssLoader]
	          },
	          {
	            test: /\.less$/,
	            use: [...commonCssLoader, 'less-loader']
	          },
	          /*
	            正常来讲，一个文件只能被一个loader处理。
	            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
	              先执行eslint 在执行babel
	          */
	          {
	            test: /\.js$/,
	            exclude: /node_modules/,
	            loader: 'babel-loader',
	            options: {
	              presets: [
	                [
	                  '@babel/preset-env',
	                  {
	                    useBuiltIns: 'usage',
	                    corejs: {version: 3},
	                    targets: {
	                      chrome: '60',
	                      firefox: '50'
	                    }
	                  }
	                ]
	              ]
	            }
	          },
	          {
	            test: /\.(jpg|png|gif)/,
	            loader: 'url-loader',
	            options: {
	              limit: 8 * 1024,
	              name: '[hash:10].[ext]',
	              outputPath: 'imgs',
	              esModule: false
	            }
	          },
	          {
	            test: /\.html$/,
	            loader: 'html-loader'
	          },
	          {
	            exclude: /\.(js|css|less|html|jpg|png|gif)/,
	            loader: 'file-loader',
	            options: {
	              outputPath: 'media'
	            }
	          }
	        ]
	      }
	    ]
	  },
	  plugins: [
	  	//提取css文件
	    new MiniCssExtractPlugin({
	      filename: 'css/built.css'
	    }),
	    //压缩css文件
	    new OptimizeCssAssetsWebpackPlugin(),
	    //解析生成html文件
	    new HtmlWebpackPlugin({
	      template: './src/index.html',
	      minify: {
	        collapseWhitespace: true,
	        removeComments: true
	      }
	    })
	  ],
	  mode: 'production'
	};