webpack生产环境常用功能

css处理

提取css为单独的文件

下载css-mini-extract-plugin

module:{
  rules:[{
    test:/\.css$/,
    use:[
      MiniCssExtractPlugin.loader,
      'css-loader'
    ]
  }]
}
plugin:{
  new MiniCssExtractPlugin()
}

css兼容性处理

下载postcss-loader postcss-preset-env

module:{
  rules:[{
    test:/\.css$/,
    use:[{
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:() => {
          require('postcss-preset-env')()
        }
      }
    }]
  }]
}

在package.json文件中配置

{
  "browserslist":{
    "production":[],
    "development":[]
  }
}

post-css工作流程

压缩css

plugins:[
  new CssMinimizerWebpackPlugin()
]

js处理

JavaScript eslint检查

语法检查规范编码风格

eslint配置：airbnb

module:{
  rules:[{
    test:/\.js$/,
    loader:'eslint-loader',
    exclude:/node_modules/,
    options:{
      fix:true
    }
  }]
}

在package.json中配置

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }

兼容性处理

module:{
  ruels:[{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
      presets:['@babel/preset-env'] // 只需要在js文件中引入即可，这种方式是代码文件太大
    }
  }]
}

按需加载方式

module:{
  ruels:[{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
      presets:[ // 预设指示bable做怎么样的兼容性处理
        [
          '@babel/preset-env',
          {
            useBuiltIns:'usage',
            corejs:{
              version:3
            },
            targets:{
              chrome:'60',
              firefix:'60',
              ie:'9',
              edge:'17'
            }
          }
        ]
      ] 
    }
  }]
}

压缩html和js

plugins:[{
  new HtmlWebpackPlugin({
    minify:{
      collapseWhitespace:true, // 移除空格
      removeComments:true // 移除注释
    }
  })
}]
mode:'production', // 使用production模式即可开启js压缩