>[success] # 打包一个组件库 ~~~ 1.在项目开发的一定阶段的时候，我们会构建属于自己公司内部的一些工具库，我们可以使用webpack 来进行构建 ~~~ >[info] ## 如何构建 ~~~ 1.在构建时候我们需要考虑点如下： 1.1.需要打包压缩版和⾮压缩版本 1.2.⽀持 AMD/CJS/ESM 模块引⼊ 2.了解打包一些属性 output: { path: path.resolve(__dirname, 'dist'), filename: 'number-word.js', //打包之后生成的文件名，可以随意写。 library: 'numberWord', // 指定类库名,主要用于直接引用的方式(比如使用script 标签) libraryExport: "default", // 对外暴露default属性，就可以直接调用default里的属性 globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况 libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用 }, ~~~ [output-librarytarget更多的打包暴露方式](https://www.webpackjs.com/configuration/output/#output-librarytarget) >[danger] ##### 尝试构建 ~~~ 1.构架步骤前期准备还是一样的安装webpack -- 'npm i webpack webpack-cli -D' 2.决定文件压缩 -- 'npm i webpack webpack-cli -D' 3.对文件目录做一下说明，首先src下的index.js 就是我们写基本库，打包时候的入口 文件，根目录的index.js 是packjson里面'main'字段文件位置 4.要记住用户使用的是我们打包在dist 里面的文件内容 ~~~ [packjson 中main字段说明](https://blog.csdn.net/u014291497/article/details/78014446)  * webpack.config.js 配置 ~~~ const TerserPlugin = require('terser-webpack-plugin') module.exports = { mode:'none', // 为了控制那些入口文件是真正需要压缩的，这样设置none就可以纯自己配置 entry: { 'test-lib': './src/index.js', 'test-lib.min': './src/index.js', }, output: { filename: '[name].js', library: 'testLib', libraryTarget: 'umd', libraryExport: 'default' }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ include: /\.min\.js$/, }), ], } } ~~~ * 根目录的index.js 配置 ~~~ 1.在不同环境下 使用的是压缩包还是非压缩包 ~~~ ~~~ if (process.env.NODE_ENV === "production") { module.exports = require("./dist/large-number.min.js"); } else { module.exports = require("./dist/large-number.js"); } ~~~