三、webpack学习过程中遇到的一些问题以及解决方法

1、使用devServer开发服务器实现自动化时，发现如果 项目构建后路径写成
     contentBase: resolve(__dirname, 'build'),  会出错，换了以下的写法后，就不会再报错了
  static:resolve(__dirname, 'build')

关于devServer的配置：

 devServer:{
        static:resolve(__dirname, 'build'),
        compress: true,
        port: 3000,  // 启动端口号
        open: true  //自动打开浏览器
    }

2、按照以下方法去配置css兼容性问题的话：

 {
      loader: 'postcss-loader',
      options: {
          ident: 'postcss',
          plugins: () => [
          // postcss 的插件
           require('postcss-preset-env')()
            ]
         }
}

会报错：“. PostCSS Loader has been initialized using an options object that does not match the API schema.\n - options has an unknown property 'plugins'.”

解决方法：

在webpack.config.js同级目录下新建文件postcss.config.js

写如下代码：

module.exports={
    plugins:[
    //使用postcss插件
        require('postcss-preset-env')
    ]
}

 3、在webpack5中使用eslint对js语法检查，使用eslint-loader，会报错

解决方法：安装如下插件：

npm i eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import -D

说明：eslint-webpack-plugin 用于替代eslint-loader(即将废弃)

在webpack.config.js配置文件中，做如下的配置：

const ESLintPlugin = require('eslint-webpack-plugin');

.....

plugins: [
         ...
        //js语法检查
        new ESLintPlugin({
            fix: true,
            extensions: ['js', 'json', 'coffee'],
            exclude: '/node_modules/'
        }),
    ],

在package.json文件中：

"eslintConfig": {
    "extends": "airbnb-base",
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "webpack.config.js"
        }
      }
    }
  }