Webpack 分离配置文件

安装 webpack-merge

npm install webpack-merge --save-dev

新建 base.conflg.js 公共配置

const path = require('path');
module.exports = {
	//指定入口
	entry: "./src/index.ts",
	//指定打包存放的出口
	// output: {
	// 	//指定存放的目录
	// 	path: path.resolve(__dirname, 'dist'),
	// 	//打包后文件名字
	// 	filename: "chuilt.js",
	// 	// 向外暴露的对象的名称
	// 	// library: 'aUtils',
	// 	// 打包生成库可以通过esm/commonjs/reqirejs的语法引入
	// 	libraryTarget: 'umd',
	// },
	resolve: {
		extensions: [".ts", ".tsx", ".js"]
	},
	//指定打包时使用的模块
	module: {
		//指定加载规则
		rules: [{
			//指定是对哪些文件生效
			test: /\.ts$/,
			//要使用的loader
			use: 'ts-loader',
			//排除的文件
			exclude: /node-modules/
		}]
	}
}

dev.conflg.js 运行时环境

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')
const path = require('path');
module.exports = webpackMerge.merge(baseConfig, {
	//指定打包存放的出口
	output: {
		//指定存放的目录
		path: path.resolve(__dirname, '../dist'),
		//打包后文件名字
		filename: "chuilt.js",
		// 向外暴露的对象的名称
		// library: 'aUtils',
		// 打包生成库可以通过esm/commonjs/reqirejs的语法引入
		libraryTarget: 'umd',
	},
})

prod.conflg.js 正式环境

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')
const path = require('path');
module.exports = webpackMerge.merge(baseConfig, {
	//指定打包存放的出口
	output: {
		//指定存放的目录
		path: path.resolve(__dirname, '../dist'),
		//打包后文件名字
		filename: "chuilt.ts",
		// 向外暴露的对象的名称
		// library: 'aUtils',
		// 打包生成库可以通过esm/commonjs/reqirejs的语法引入
		libraryTarget: 'umd',
	},
})

有 webpack.config.js 文件的，需要删除它

修改package.json

"scripts": {
 	"test": "echo \"Error: no test specified\" && exit 1",
 	"build:js": "webpack --config ./build/dev.config.js",
 	"build:ts": "webpack --config ./build/prod.config.js"
},