【前端工程化】五：webpack5快速入门（一）

webpack5相对于webpack4做了大量的升级和优化，因此webpack5的学习迫在眉睫！！

首先我们需要下载webpack5，不推荐使用全局的webapck，为了统一webpack版本，建议将webpack和webpack-cli安装在开发依赖中，在学习webpack5之前，我们需要先具备一些基础知识；

browserslistrc 工作流程

browserslistrc是用来配置各种工具适配浏览器的范围，通过在 Can i use 上面的数据来查找；

有两种配置的方法

• package.json中的browserslistrc属性

  "browserslist": [
      ">1%",
      "last 2 version",
      "not dead"
  ]
  

• .browserslistrc文件

  > 1% 
  last 2 version
  not dead
  

postcss工作流程

postcss是 javaScript 转换样式的工具，例如我们需要给所有的css代码自动加浏览器前缀等行为；

npm i postcss --dev

如果想在命令行使用：npm i postcss-cli -D

命令行使用：npx postcss -o ret.css ./src/css/test.css

postcss像一个独立的工具（个人理解是类似于babel的平台），如果想要使用它，必须下载各种插件

命令行使用插件：npx postcss --use autoprefixer -o ret.css ./src/css/test.css

• 给所有的css代码加浏览器前缀：npm i autoprefixer -D

• 兼容css代码：npm i postcss-preset-env

• autoprefixer被包含在postcss-preset-env中，所以只需要postcss-preset-env

• 像下面这样写postcss-loader的重复太多了，可以使用postcss.config.js文件来配置postcss

  // postcss.config.js
  module.exports = {
       
    plugins: [
      // require('postcss-preset-env')
      // require('autoprefixer')
      'postcss-preset-env'
    ]
  }
  

  // 添加 postcss.config.js 配置文件以后无需手动再写配置
  module: {
       
      rules: [
        {
       
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader'
          ]
        },
        {
       
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'less-loader'
          ]
        }
      ]
    }
  

// 手动写postcss配置
const path = require('path')

module.exports = {
   
  entry: './src/index.js',
  output: {
   
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loade