概述
webpack-library-template 是一个适用于构建前端库的 npm 包模板。它基于 webpack 和 Babel，并支持导出不同的模块格式（CommonJS、ES6、UMD）。使用这个模板，你可以更加简单地构建一个前端库，同时这也是一个优秀的学习 webpack 的例子。
安装
使用 npm 安装 webpack-library-template ：
npm install webpack-library-template --save-dev
配置
基本配置
在项目根目录新建一个 webpack.config.js 文件，并填写如下的基本配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- ----------
-------- ------------ -- --
-------------- ------ -- ------
--------------- ---- -- --- --- ---------
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
-
--其中，entry 配置入口文件路径，output 配置输出目录和库名和所需导出的模块格式等信息，module 配置用于处理 JavaScript 文件的 loaders（此处只使用了一个 babel-loader 用于处理 ES6 和更高版本的 JavaScript 代码）。
开发环境配置
在开发环境，你希望能够看到更加友好的错误提示、使用热模块替换等功能，修改配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- ----------
-------- ------------
-------------- ------
--------------- ----
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
--
-------- -------------------- -- ----
---------- -
------------ ---------
---- ---- -- -----
--
-------- -
--- ------------------------------------ -- -----
-
--在配置中增加了 devtool 和 devServer，并添加了开启 hot 模式和插件。
部署配置
在部署前需要使用 webpack 对库文件进行构建，修改配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - ----- ----- -- -
----- ------ - --------- --- ------------- -- --------
------ -
------ -----------------
------- -
----- ----------------------- ----------
-------- ------------
-------------- ------
--------------- ----
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
--
-------- ------ - ----- - -------------------- -- ---------
-------- -
--- ----------------------
----------------------- ------ - ---------------------------- - -----------------------------
--
-
--
--在配置中增加了获取当前构建环境的信息，增加了 DefinePlugin 用于设置 environment 变量 process.env.NODE_ENV 来优化库代码。
使用
在根目录下新建 src/index.js 作为入口文件：
export const hello = () => {
console.log('Hello World!');
};在 package.json 文件的 scripts 中增加如下命令：
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack --mode production"
}在命令行输入 npm run dev 启动开发环境或者 npm run build 构建生产环境下的库文件。在代码中使用导出的模块：
import { hello } from 'myLibrary';
hello(); // 输出：Hello World!总结
webpack-library-template 为开发者提供了一个快速构建前端库的模板，同时也是学习 webpack 的一个优秀例子。本文介绍了如何安装、配置及使用该模板，同时也对 webpack 和 Babel 有一定的概括性介绍。入门使用 webpack-library-template，并学习到更多 web 前端相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e0903