webpack4.0 学习教程（了解命令行脚本配置）

最新推荐文章于 2022-10-24 20:23:42 发布

bugdemon8023

最新推荐文章于 2022-10-24 20:23:42 发布

阅读量276

点赞数

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/smz8023/article/details/86650124

版权

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Webpack4.0的配置方法，包括如何设置外置配置文件webpack.config.js，以及如何通过修改package.json来指定不同的构建任务。同时，文章还深入探讨了如何根据不同环境（如开发、生产）配置Webpack，实现代码的动态加载和压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack4.0 学习教程（1）

1.webpack外置配置文件名：webpack.config.js

	更改package.json文件
	
 	 "scripts": {
  			'build':'webpack -- config webpack.config.js'
  		}

2.如指定其他webpack文件名：webpack.config.dev.js
更改package.json文件

 	 "scripts": {
  			'build':'webpack -- config webpack.config.dev.js'
  		}

或者~~
1.修改webpack.config.js 文件

const webpack = require("webpack");

const config = {
   //公共webpack配置
};

module.exports = function (env = 'dev') {
    // env = env || "dev";
    return require("./webpack.config." + env + ".js")(env, config);
};

2.修改package.json 文件

 "scripts": {
  			'build':'webpack --env=dev -p'
  		}
  	-p 代表 压缩文件

3.修改webpack.config.dev.js

const webpackMerge = require("webpack-merge");

const config = {
	entry:{
	...
	},
	output:{
	...
	},
	module:{
	...
	},
	plugins:[
		...
	]
}
module.exports = function (env, defaultConfig) {
    return webpackMerge(defaultConfig, config);
};