webpack 错误无法解决. src

在使用 webpack 进行前端开发时，常常会遇到各种错误，有些错误可能会令人束手无策。这里就介绍一些常见的 webpack 错误，及其解决方法。

错误信息

ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "env" relative to directory "/Users/xxx/xxx/xxx"

错误分析

这个错误意味着缺少 babel 的依赖。

解决方法

• 通过 npm 安装依赖：

  npm install --save-dev babel-preset-env
  

• 在 .babelrc 中添加相关配置：

  {
    "presets": ["env"]
  }
  

错误信息

ERROR in bundle.js from UglifyJs
Unexpected token: keyword (const) [bundle.js:2,8]

错误分析

这个错误意味着 uglifyjs 不支持 ES6 代码。

解决方法

• 在 webpack.config.js 中添加相关配置：

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = {
    //...
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              //...
              comments: true // 删除注释
            },
            compress: {
              //...
              // 解决 const 关键字报错
              ecma: 6,
              warnings: false
            },
            mangle: {
              safari10: true
            }
          },
          parallel: true,
          cache: true
        })
      ]
    },
  };
  

错误信息

ERROR in ./src/styles.css
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|     display: flex;
...

错误分析

这个错误意味着缺少对 css 的 loader 配置。

解决方法

• 通过 npm 安装依赖：

  npm install --save-dev style-loader css-loader
  

• 在 webpack.config.js 中添加相关配置：

  module.exports = {
    // ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        // ...
      ]
    }
  }
  

总结

以上是常见的 webpack 错误及其解决方法，当然还有很多其他的错误和解决方法，如有问题可查看官方文档或进行搜索。在遇到错误时，要耐心查看具体的错误信息，并结合实际情况寻找问题所在，再进行相应的解决方法。