webpack简单入门

创建webpack-test文件夹，在该文件夹下创建3个文件夹，config，dist，src

1 md webpack-test
2 cd webpack-test
3 md config,dist,src

初始化项目

1 npm init -y

此时目录结构多出一个package.json文件

现在开始安装webpack及其其它模块

在这里我使用的是淘宝镜像下载，本地安装了webpack，webpack-cli，webpack-dev-server

1 cnpm install webpack webpack-cli webpack-dev-server --save-dev

目录结果如下

修改package.json文件

删除行

"test": "echo \"Error: no test specified\" && exit 1"

新加两行

"build":"node_modules/.bin/webpack --config=config/webpack.dev.js",
"server":"node_modules/.bin/webpack-dev-server --config=config/webpack.dev.js"

效果如下：

创建webpack.dev.js，index.html，main.js三个文件

目录结果如下：

main.js文件

document.getElementById('app').innerText="hello webpack";

index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<script src="./main.bundle.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

webpack.dev.js

const path = require("path");
module.exports={
	mode:"development",
	// 入口文件配置项
	entry:{
		main:"./src/main.js"
	},
	//出口文件配置项
	output:{
		//打包路径
		path:path.resolve(__dirname,"../dist"),
		//打包文件名
		filename:"[name].bundle.js"
	},
	//模块：例如解读css，图片如何转换、压缩
	module:{},
	//插件,用于生产模块和各项功能
	plugins:[],
	//配置webpack开发服务功能
	devServer:{
		//设置基本目录结构
		contentBase:path.resolve(__dirname,"../dist"),
		//服务器的IP地址
		host:"localhost",
		//服务器压缩是否开启
		compress:true,
		// 配置服务器端口
		port:"8899"
	}
}

现在基本配置已经完成，在命令行输入一下代码就可以实现打包功能；