webpack4 打包组件或库并发布到npm上

旧城等待， 2021-07-24 20:16 373阅读 0赞

打包方式和打包项目时类似
    思路:
    	(1)输出代码的压缩和未压缩版本文件
    		将src下的源代码进行打包输出,设置entry分别对应压缩和未压缩版本,设置mode:'none'可使得打包都不压缩
    	(2)控制压缩文件对应的压缩,未压缩文件不压缩
    		通过optimization中的new TerserPlugin压缩插件匹配.min.js压缩版本文件,进行压缩打包输出
    	(3)引入库时,根据当前运行环境判断引入压缩文件还是非压缩文件
    		在项目的index.js入口文件中,根据process.env.NODE_ENV=='production'来判断是引入压缩文件还是非压缩文件
    		然后使用module.exports=require('文件路径')将其导出
    			其中:
    				不使用export等是因为node环境使用commonjs语法
    				该文件仅作判断后导出处理,当下载包后,import xx from XX即可使用
    
    (1)下载压缩插件
    	cnpm install terser-webpack-plugin@4 -D 
    	webpack5不需要下载
    
    (2)配置
    	module.exports = {
    	  entry: { 设置源代码入口
    	    "add": './src/index.js',   	非压缩版
    	    "add.min":'./src/index.js' 	压缩版
    	  },
    	  output: {
    	    path: path.resolve(__dirname, 'dist'),
    	    filename: '[name].js',	根据入口chunk名称导出
    	    library: '暴露的库名称',
    	    libraryTarget: 'umd',	将你的library暴露为所有的模块定义下都可运行的方式,如amd、cmd等
    	    libraryExport:'default'	库导出时添加了.default导出,即下载该库后,import x from XX,直接导入即可,而不需要添加XX.default
    	  },
    	  mode: 'none',	不压缩代码
    	  optimization: {
    	    minimize: true,  使用minimizer中的压缩插件
    	    minimizer: [
    	      new TerserPlugin({
    	        test:/\.min\.js$/   匹配压缩的chunk,即只压缩min.js文件
    	      })
    	    ]
    	  }
    	  }
    	  
    (3)项目入口文件index.js根据环境导出对应打包后的文件
    	if (process.env.NODE_ENV == 'production') {
    	    module.exports=require('./dist/xx.min.js')
    	} else {
    	   module.exports=require('./dist/xx.js')
    	}
    
    (4)打包发布
    	"name":"库名称",
    	"description":"库描述",
    	"script":{
    		"build":"webpack"
    		"prepublish":"webpack"
    	}
    	
    		添加prepublish钩子,表示执行npm publish的时候会执行该命令
    			先npm login登录npm账号
    			
    (4)使用
    	npm下载该包名称即package.json中name设置的名称,import导入即可使用

代码示例:  
库的源代码放置在src下面,库的入口文件仅做导入判断处理,故只需压缩src下的文件  
webpack.config.js:

项目入口文件index.js:

if (process.env.NODE_ENV == 'production') { 
        module.exports=require('./dist/add.min.js')
    } else { 
       module.exports=require('./dist/add.js')
    }