webpack配置 - 生产环境

开发环境的配置可以看另外一个篇文章，这篇写的是生产环境的配置

提取css成单独文件

由于css最后是打包到js中，会造成js体积过大，所以要单独提取出来

依赖：npm install mini-css-extract-plugin -D

需要配置plugins 和loader

loader 配置：因为style-loader是创建style标签将样式插入，所以要单独提取css出来的话，就要关闭style-loader 使用 MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader 这个取代style-loader，作用是：提取js中的css成单独文件

plugins配置： new MiniCssExtractPlugin( filename: 'css/built.css' ) ，filename对输出的css文件进行重命名和路径输出

 

css兼容性处理

依赖：npm i postcss-loader postcss-preset-env -D

使用 postcss-loader 的配置：options：{ ident：'postcss', plugins: () => [ require('postcss-preset-env')() ]}

使用postcss-preset-env 插件的作用：帮postcss 找到package.json中的brownslist里面的配置，通过配置加载指定的css兼容性样式

默认使用loader的写法："postcss-loader",需要修改loader配置的写法：{ loader："postcss-loader" , option: {...} }

"brownslist":[
    ">0.2%",
    "not dead",
    "not op_mini all"，
    "last 1 version"
]

压缩css

依赖：npm i optimize-css-assets-webpack-plugin -D

需要配置plugins，new OptimizeCssAssetsWebpackPlugin()

 

eslint语法检查

依赖：npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

需要配置loader

eslint-config-airbnb-base 是 权威的js语法检查规则，它依赖 eslint-plugin-import

注意：只检查自己的代码，第三方库不需要检查，exclude： /node_modules/

设置检查规则：在packjson中的eslintConfig中设置，"eslintConfig": {"extends": "airbnb-base"}

使用eslint-loader配置自动修复eslint的错误： options：{ fix: true }

 

js的兼容性处理

依赖：npm i babel-loader @babel/core -D

需要配置loader

1.基本的js兼容性处理：安装 @babel/preset-env ，问题：只能转化基本语法，如果promise高级语法不能转换

2.全部的js兼容处理：安装 @babel/polyfill ，在main.js 直接导入，打包后体检太大了

3.按需兼容性处理：安装 @core-js

 

js和html压缩

js压缩：生产环境下会自动压缩js代码，设置 mode："production"

html压缩：在new HtmlWebpackPlugin( { minify: : {...} } ) ，在minify 写上压缩配置

 

生产环境的基本配置

要先执行eslint（语法检查）在执行babel（将es6转成es5），设置enforce： "pre" 优先执行

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  entry: "./src/index.js",
  output: {
     filename:"bundle.js",
     path: path.resolve(_dirname,'build')
  },
  mode: 'production',
  module:{
      rules:[
          // eslint检查
          {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "eslint-loader",
              enforce: "pre",
              options: {
                  fix: true // 自动修复eslint的错误
              }
          },
          // js兼容性处理
          {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader",
              options: {
                  presets:[
                      '@babel/preset-env',
                      {
                          useBuiltIns: 'usage', // 按需加载
                          corejs:{
                              version: 3  // 指定core-js的版本
                          },
                          targets: { // 指定兼容和性做到哪个版本的浏览器
                              chrome : '60',
                              firefox: '60',
                              ie: '9',
                              safari: '10',
                              edge: '17'
                          }
                      }
                  ]
              }
          },
          // css 提取和兼容性处理
          {
          	test: /\.css$/,
          	use:[
                MiniCssExtractPlugin.loader, //如果需要用这个loader，就需要关闭 style-loader
          		"css-loader", // 将css文件转换为js
                {
                    loader: 'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>[
                            require('postcss-preset-env')() // postcss的插件
                        ]
                    }
                }
      	  	]
          },
          // 匹配less文件
          {
          	test: /\.less$/,
          	use:[
                MiniCssExtractPlugin.loader,
          		"css-loader",
                "less-loader"
                {
                    loader: 'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>[
                            require('postcss-preset-env')()
                        ]
                    }
                }
      	  	]
          },
          // 匹配图片文件
          {
              test: /\.(jpg|png|gif)$/,
              loader: 'url-loader',
              options: {
                  limit:8*1024,
                  esModule:false,
                  name: '[hash:10].[ext]'
              }
          },
          // 匹配html使用img
          {
              test: /\.html$/,
              loader:'html-loader'
          },
          {
          
              exclude: /\.(html|css|js)$/,
              loader:'file-loader',
              outputPath: '文件名'
          }
      ]
  },
  plugins:[
      // js和html整合插件
      new HtmlWebpackPlugin({
          template: "./src/index.html",
          minify: {
              collapseWhitespace: true, // 移除空格
              removeComments: true // 移除注释
          }
      }),
      //css 提取插件
      new MiniCssExtractPlugin({
          filename: 'css/built.css' // 对输出的css文件进行重命名和路径输出
      }),
      // css 压缩插件
      new OptimizeCssAssetsWebpackPlugin()
  ]
}