Webpack 报错：'autoprefixer' was not found
在使用 Webpack 打包前端项目时，有时会遇到类似于以下的报错信息：
----- -- ------------- ------ --- ------ ------ ----- ------- -------------- -- -------------- - ------------- ------- - ----- ------------------------------------------------- ---------------------- -------------
这个报错信息通常是由于 Webpack 缺少某些必要的依赖库所导致的，而这里的 autoprefixer 就是其中之一。
那么，什么是 autoprefixer 呢？
autoprefixer 是一个 PostCSS 插件，它可以根据你所配置的浏览器兼容性要求，自动为 CSS 属性添加浏览器前缀。例如：
-- ------ --
---- -
-------- -----
---------------- -------
-
-- ----- --
---- -
-------- ------------
-------- -------------
-------- ------------
-------- -----
----------------- -------
------------------------ -------
-------------- -------
---------------- -------
-这样，你就不需要手动为每个 CSS 属性添加前缀了，而 autoprefixer 会根据你的配置自动为你添加。
那么，为什么会出现 autoprefixer 未找到的报错呢？
这通常是由于你在 Webpack 配置中没有正确引入 autoprefixer 所导致的。例如，在使用 postcss-loader 时，你需要在配置中添加 autoprefixer 插件，例如：
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
-------- -
-----------------------
-
-
-
-
-
-
-
--在上面的配置中，我们通过 require('autoprefixer') 引入了 autoprefixer 插件，并将其作为 postcss-loader 的一个插件来使用。
如果你使用了其他的 Webpack 插件或者工具，也需要在相应的配置中正确引入 autoprefixer，否则就会出现类似于 autoprefixer was not found 的报错信息。
总结
在前端开发中，autoprefixer 是一个非常常用的 PostCSS 插件，它可以自动为 CSS 属性添加浏览器前缀，让我们不需要手动添加。如果在使用 Webpack 打包项目时遇到类似于 autoprefixer was not found 的报错信息，通常是由于缺少相应的依赖库所导致的。正确引入 autoprefixer 可以解决这个问题，让我们的项目顺利打包。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f12c1b2b3ccec22f9f3d62