08-webpack5学习-通过命令行参数区分打包环境

项目结构

webpackTerminalEnv
│  package-lock.json
│  package.json
│  postcss.config.js
│  webpack.config.js
└─src
		index.css
        index.js
        index.css

安装依赖

在webpackTerminalEnv目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader --save-dev

webpack配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exprots = (env)=>{ 
	const config = {
		entry:'./src/index.js',
		output:{
			path:resolve(__dirname,'dist'),
			filename:'[name].build.js'
		},
		module:{
			rules:[
				{
					// 匹配文件规则
					test:/\.css$/i,
					// 使用的loader
					use:['style-loader','css-loader']
				}
			]
		},
		plugins:[
			new HtmlWebpackPlugin()
		]
	};
	if (env.production) {
	    Object.assign(config, {
	      mode: 'production',
	    });
	} else {
	    Object.assign({
	      mode: 'development',
	    });
	}
	return config;
}

本地启动命令

• 方式一：在webpackTerminalEnv目录下运行

// 开发环境打包
webpack --config ./webapck.config.js
// 生产环境打包
webpack --config ./webpack.config.js --env production

• 方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js",
		"build:pro":"webpack --config ./webpack.config.js --env production"
	}
	...
}

修改保存后，在webpackTerminalEnv目录下运行如下命令：

npm run build