前言
在前端开发中，webpack 是常常使用的构建工具。但是，每次配置 webpack 都需要耗费很多的时间，而且配置错误会导致程序出错，导致浪费时间和精力。为了解决这个问题，我们开发了一个 npm 包 @talentui/webpack-config，它可以为你提供一个已经配置好的 webpack，你只需要在此基础上进行少量的修改就可以完成你的项目构建。
安装
安装 @talentui/webpack-config 简单明了，只需要使用 npm 或者 yarn 来进行安装即可：
npm install @talentui/webpack-config --save-dev
或者
yarn add @talentui/webpack-config --dev
使用
安装完成之后，你需要在项目根目录下创建一个 webpack.config.js 文件，然后在该文件中引用 @talentui/webpack-config。
-- -------------------- ---- -------
-- -----------------
----- ------------- - ------------------------------------
-------------- - --------------
-
-- ------- --- --
--
-
-- ---------- ------ --- --
---然后就可以在你项目的 package.json 中配置 build 命令了：
"scripts": {
"build": "webpack --mode production"
}当你运行 npm run build 命令时，就会自动调用 webpack 进行构建。
配置项
@talentui/webpack-config 预设了一些基础配置，同时也提供了大量的可配置项。以下是一些常用的配置项：
入口
{
entry: {
main: './src/index.js'
}
}出口
{
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}模块处理
-- -------------------- ---- -------
-
------- -
------ -
-
----- ----------
---- -
------- ---------------
-------- -
-------- -------------- ---------------
-
--
-------- --------------
--
-
----- ----------
---- ---------------- ------------- ---------------
--
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- -
-
------- -------------
-------- -
------ ------
----- ----------------------
--
--
--
--
-
-
-插件
-- -------------------- ---- -------
-
----- --------------
-------- -
--- ------------------
-
--------- -------------------- ---------------------
--------- -------------------- -----------------------
-
--
--- ------------------------------------
-
-压缩混淆
-- -------------------- ---- -------
-- ---------
-- ------------
-- -------------- -
------------------- - -
--------- -----
---------- -
--- --------------
-------------- -
--------- -
------------- -----
--
--
---
--
------------ -
------- ------
--
--
-示例
-- -------------------- ---- -------
----- ------------- - ------------------------------------
----- ----------------- - -------------------------------
----- ---- - ----------------
----- ------- - -------------------
----- ------------ - -------------------- --- -------------
-------------- - --------------
-
----- ------------ - ------------ - --------------
-------- ------------ - ------ - -------------------
------ -
----- -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
----------- ------- --------
--
------- -
------ -
-
----- ----------
---- -
------- ---------------
-------- -
-------- -------------- ----------------
--
--
-------- ---------------
--
-
----- ----------
---- ---------------- ------------- ---------------
--
-
----- ---------
---- ---------------- --------------
--
-
----- -----------------------
---- -
-
------- -------------
-------- -
------ ------
----- ----------------------
--
--
--
--
--
--
-------- -
--- -------------------
--------- -------------------- ---------------------
--------- -------------------- -----------------------
---
--- -------------------------------------
--
------------- -
--------- -----
---------- -
--- --------------
-------------- -
--------- -
------------- -----
--
--
---
--
------------ -
------- ------
--
--
---------- -
------------ -------------------- --------
----- ----------
----- -----
---- -----
----- -----
--
--
-
-- --------
-
--结论
实际上，使用 @talentui/webpack-config 是十分简单的，只需要进行少量的配置，就可以完成你的项目构建。同时，它也为你提供了基础的 webpack 配置，你可以根据你的需要进行修改。在使用时，如果你遇到了问题，可以查看官方文档或者在社区中提问，我们会尽可能地为你解答问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136293