Webpack笔记（三）

四.webpack生产环境的基本配置

        4.1提取css成单独文件

                安装插件mini-css-extract-plugin

//局部
module: {
	rules: [
		{
			test: /\.css$/,
			use: [
				// 创建 style 标签，将样式放入
				// 'style-loader',
				// 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
				MiniCssExtractPlugin.loader,
				// 将 css 文件整合到 js 文件中
				'css-loader'
			]
		}
	]
},
plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html'
	}),
	new MiniCssExtractPlugin({
		// 对输出的 css 文件进行重命名
		filename: 'css/built.css'
	})
],

        4.2css兼容性处理

                安装postcss-loader postcss-preset-env

                修改配置：

const { resolve } = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename : 'index.js',
    path:resolve(__dirname , 'build')

  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          // 'style-loader',
          //这个loader取代style-loader,作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          'css-loader',

          /**
           * css兼容性问题：postcss --> postcss-loader postcss-preset-env
            
            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
            
            可以去github搜索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
            
          // 修改loader的配置
          {
            loader:'postcss-loader',
            options:{
              ident:'postcss',
              plugins:() => {
                //postcss的插件
                require('postcss-preset-env')()
              }
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({file:'css/built.css'})
  ],
}

                修改package.json

"browserslist": {
	"development": [
		"last 1 chrome version",
		"last 1 firefox version",
		"last 1 safari version"
	],
	"production": [
		">0.2%",
		"not dead",
		"not op_mini all"
	]
}

        4.3压缩css

                安装optimize-css-assets-webpack-plugin

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-	webpack-plugin')
// 设置 nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/built.js',
		path: resolve(__dirname, 'build')
	},
	module: {
		rules: [
            {
				test: /\.css$/,
            	use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							ident: 'postcss',
							plugins: () => [
							// postcss 的插件
								require('postcss-preset-env')()
							]
						}
            		}
				]
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		new MiniCssExtractPlugin({
			filename: 'css/built.css'
		}),
		// 压缩 css
		new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
};

        4.4 js语法检查

                安装 eslint-loader eslint eslint-config-base eslint-plugin-import

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry : "./src/index.js",
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      /**
       * 语法检查： eslint-loader  eslint
       *  注意：只检查自己写的与那代码，第三方的库是不用检查的
       *  设置检查规则：
            package.json中eslintConfig中设置
            "eslintConfig":{
              "extend" : "airbnb-base"
            }
            airbnb代码规范
            airbnb --> eslint-config-airbnb eslint-plugin-import eslint
       */
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:'eslint-loader',
        options:{
          //自动修复eslint错误
          fix:true
        }
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ]
}

        4.5 js兼容性处理

                安装babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry : "./src/index.js",
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      /**
       * js兼容性处理：babel-loader @babel/core
       *  1.基本js兼容行处理 --> @babel/preset-env
       *    问题：只能转换基本语法，如promise等不能转换
       *  2.全部js兼容性处理 --> @babel/ployfill
       *    问题：我只要解决部分兼容性问题，但是将所有兼容行代码全部映入，体积太大了
       *    在index.js入口文件中添加 import '@babel/polyfill'
       *  3.需要做兼容性处理：按需加载 --> core.js
       */
      {
        test:/\.js$/,
        exclude:/node-modules/,
        loader:'babel-loader',
        options:{ 
          presets:[
            '@babel/preset-env',
            //按需加载添加以下代码
            {
              useBuiltIns:'usage',
              //指定core-js的版本
              corejs:{
                version:3
              },
              //指定兼容性做到哪个版本的浏览器
              targets:{
                chrome:'60',
                firefox:'60',
                ie:'9',
                safari:'10',
                edge:'17'
              }
            }
          ]
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ]
}

        4.6 js压缩

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry : "./src/index.js",
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
    })
  ],
  mode:'production'
}

        4.7 html压缩

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry : "./src/index.js",
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        //移除空格
        collapseWhitespace:true,
        //移除注释
        removeComments:true
      }
    })
  ],  
  //生产环境下会自动压缩js代码
  mode:'production'
}

        4.8 生产环境配置

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

//定义nodejs环境变量：决定使用browserlist的哪个环境
process.env.NODE_ENV = 'production'

//复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    //还需要再package.json中定义browserslist
    loader:'postcss-loader',
    options:{
      ident:'postcss',
      plugins:() => {
        require('postcss-preset-env')
      }
    }
  }
]         

module.exports = {
  entry:'js/built.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[...commonCssLoader]
      },
      {
        test:/\.less$/,
        use:[...commonCssLoader,'less-loader']
      },
      /**
       * 正常来讲，一个文件只能被一个文件处理
       * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
       *  先执行eslint 再执行Babel
       */
      {
        //在package.json中eslintConfig --> airbnb
        test:/\.js$/,
        exclude:/node_modules/,
        //优先执行
        enforce:'pre',
        loader:'eslint-loader',
        options:{
          fix:true
        }
      },
      {
        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'
      },
      {
        test:/\.(js|css|less|html|jpg|png|gif)/,
        loader:'file-loader',
        options:{
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename:'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin,
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      minify:{
        collapseWhitespace:true,
        removeComments:true
      }
    }),
  ],
  mode:'production'
}