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