如何用Webpack打包组件库

·  阅读 1026

一个组件,从业务代码抽取。是webpack项目,怎么输出成组件库呢?

要求

  • 组件就是业务里提取的代码,希望开发环境完全一致,就用webpack。
  • 希望生成npm组件.
  • 希望能按需引入,像require('lodash/debounce')那样.

方案

多entry打包

entry: {
   input: './src/comp/input/'
   select: './src/comp/select'
   ...
   index: './src/index' // index import了所有组件
}
  output: {
        path: path.resolve(process.cwd(), 'lib'),
        filename: '[name]/index.js',
        library: 'my-ui',
        libraryTarget: 'umd',
 },
复制代码

配置external,不打包这些文件

  externals: {
    vue: 'vue',
    lodash: 'lodash',
    classnames: 'classnames',
    'moment': 'moment'
 },
复制代码

配置splitChunks拆成很多小文件

  plugins: [
        new MiniCssExtractPlugin({
            filename: 'index.css',
            ignoreOrder: true,
        }),
 ]
 ...
 optimization: {
        minimize: false,
        namedChunks: true,
        runtimeChunk: true,
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            maxAsyncRequests: Infinity,
            enforceSizeThreshold: Infinity,
            minSize: 0,
            hidePathInfo: false,
            cacheGroups: {
                styles: { // styles打包成了一个文件
                    test: (module, chunks) => module.constructor.name === 'CssModule',
                    name: "styles",
                    chunks: "all",
                    enforce: true
                },
            }
        },
    },
复制代码

增加plugins,记录并生成entry文件

  {
            apply: (compiler) => {
                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
                    const css1 = fs.readFileSync(path.resolve(__dirname, '../lib/styles.index.css'));
                    fs.unlinkSync(path.resolve(__dirname, '../lib/index.js'));

                    if (!fs.existsSync(path.resolve(__dirname, '../entry'))) {
                        fs.mkdirSync(path.resolve(__dirname, '../entry'))
                    }

                    for (let [entryName, entry] of compilation.entrypoints) {
                        let chunkStr = ''
                        entry.chunks.forEach((chunk, i) => {
                            if (i == entry.chunks.length - 1) {
                                return
                            }

                            chunkStr += `require('../lib/${chunk.id}/index')\n`;
                        })

                        const outTemplate = `
${chunkStr}
var mod = require('../lib/${entryName}')
module.exports.__esModule = mod.__esModule;
module.exports = mod;
                    `
                        fs.writeFileSync(path.resolve(__dirname, `../entry/${entryName}.js`), outTemplate)
                    }
                    return true;
                });
            }
        }

复制代码

总结:

通过上面的方法,会生成 lib 和 entry文件夹

lib文件夹是webpack产出默认内容
按需引入代码使用require('mod/entry/input')
全量引入使用require('mod/entry/index')


entry文件夹作为入口,按需引入各种小包

entry的一个例子

分类:
前端
标签:
分类:
前端
标签: