基础教程

首先要保证装了nodejs和npm

第一步：创建文件夹，命名为demo

创建demo的文件夹

第二步：win+R，输入cmd，进入命令行窗口，

第三步：进入demo的文件目录下，首先输入`d:`进入D盘；再输入`cd /GW/demo`进入demo

进入demo文件夹下

第四步：`npm init`，初始化项目，demo文件夹下会出现一个package.json文件第五步：安装webpack4和webpack-cli

命令行输入npm install webpack --save-dev和npm install webpack-cli --save-dev
安装完成后demo文件夹目录结构如下：
局部安装webpack

第六步：demo文件夹下新建文件index.html和webpack.config.js(webpack配置文件),以及新建文件夹src和app,如下：

在这里插入图片描述

第七步：webpack.config.js输入如下：

const path = require("path");
module.exports ={    	
	mode:"development",    
	devtool:"source-map",    
	entry:{        
		app:path.resolve(__dirname,"src/index.js"),    
	},    
	output:{        
		path:path.resolve(__dirname,"app"),        
		filename:'[name].bundle.js'    
	},    
	module:{        
		rules:[]    
	}
}

其中，entry代表入口文件，“src/index.js”为入口文件。output规定打包后输出文件，app为输出文件存放目录，“[name].bundle.js”代表输出文件名

第八步:demo/src目录下创建index.js文件，index.js写入如下代码行：

document.getElementById("root").innerHTML = "hello";

index.html中编写如下：

<!DOCTYPE html>
<html>    
	<head></head>    
	<body>    	    
		<div id="root"></div>        
		<script src="./app/app.bundle.js"></script>    
	</body>
</html>