在前端项目中，Webpack是一个非常重要的工具，它可以将JavaScript、CSS、图片等文件打包成一个或多个文件，并优化项目性能。而fengwuxp_common_webpack是一个较为常用的Webpack插件，可以帮助我们更快捷地搭建前端开发环境。本文将详细介绍npm包fengwuxp_common_webpack的使用教程。
安装
使用npm安装fengwuxp_common_webpack：
npm install fengwuxp_common_webpack --save-dev
配置
在webpack.config.js文件中，引入fengwuxp_common_webpack：
-- -------------------- ---- -------
----- ----------------------- - -----------------------------------
----- ------------- - -
------ -
---- ----------------
--
------- -
----- ----------------------- --------
--------- --------------------
--
-------- -
--- -------------------
--------- ---------------------
---
--- -------------------------
-
--功能
fengwuxp_common_webpack包含以下功能：
处理css文件
使用
mini-css-extract-plugin插件将css文件提取到单独的文件中，避免样式渲染过程中的闪烁；使用
postcss-loader对css文件进行autoprefixer自动添加前缀。处理图片文件
使用
url-loader对图片文件进行压缩，并将小于8KB的图片文件以base64字符串的形式引入css文件中。处理字体文件
使用
file-loader对字体文件进行处理。引入公共库
使用
webpack.ProvidePlugin插件加载全局模块，如jquery和lodash等。热更新
使用
webpack-dev-server插件实现页面实时刷新，较为实用。自动注入
使用
html-webpack-plugin插件自动注入打包后的js、css文件到html文件中。
示例
下面是一段vue组件的代码，具有自定义样式和引入字体的功能：
-- -------------------- ---- -------
----------
---- ------------
---- ------------------- -----------
---- --------------- ------------------
------
-----------
-------
------ -
---------- -----
------ -----
-
--------- -
------------ -----------
-以上代码中，.icon-emoji类名是引用的iconfont字体文件中的一个图标。使用fengwuxp_common_webpack完整的配置代码：
-- -------------------- ---- -------
----- ----------------------- - -----------------------------------
----- ------------- - -
------ -
---- ----------------
--
------- -
----- ----------------------- --------
--------- --------------------
--
------- -
------ -
-
----- ---------
---- ------------
--
-
----- ---------
---- -
----------------------------
-
------- -------------
-------- -
---------- ----
-
--
----------------
-
--
-
----- ---------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------------------
-
-
-
--
-
----- ---------------------------------
---- -
-
------- --------------
-------- -
----- ----------------------------
-
-
-
-
-
--
-------- -
--- -------------------
--------- ---------------------
---
--- ----------------------
--------- -------------------------
---
--- --------------------------
--- -----------------
-
--总结
fengwuxp_common_webpack是一个在前端开发中较为常用的Webpack插件。使用它可以方便地处理css、img、font等文件，同时也可以实现自动注入、热更新等功能。本文详细介绍了npm包fengwuxp_common_webpack的安装、配置和功能，希望对读者有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79433