A component, extracted from the business code. Is a Webpack project, how to output into a component library?

requirements

  • Components are code extracted from the business, and if you want a completely consistent development environment, use WebPack.
  • You want to generate NPM components.
  • Hopefully it can be introduced on demand, like require(‘lodash/debounce’).

plan

Multiple entry package

entry: {
   input: './src/comp/input/'
   select: './src/comp/select'.index: './src/index' // index imports all components
}
  output: {
        path: path.resolve(process.cwd(), 'lib'),
        filename: '[name]/index.js'.library: 'my-ui'.libraryTarget: 'umd',},Copy the code

Configure External without packaging these files

  externals: {
    vue: 'vue'.lodash: 'lodash'.classnames: 'classnames'.'moment': 'moment'
 },
Copy the code

Configure splitChunks to split into many small files

  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 wraps into a file
                    test: (module, chunks) = > module.constructor.name === 'CssModule'.name: "styles".chunks: "all".enforce: true}}},},Copy the code

Add plugins and record and generate an entry file

  {
            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; }); }}Copy the code

Conclusion:

With the above method, the lib and Entry folders are generated

The lib folder is the default content of webpack output. Import code on demand using require(‘mod/entry/input’). Import code in full using require(‘mod/entry/index’).



The Entry folder serves as an entry point for the introduction of various packages on demand

An example of entry