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"
	}
}

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

npm run build

  

此时会打包生成一个js文件,目录结构如下:

 

再次在命令行输入以下命令,启动server服务,然后在浏览器输入localhost:8899就可以看到结果了。

 

 

 

 

 

 

 

 

posted @ 2019-06-03 17:42  sjzhen  阅读(147)  评论(0编辑  收藏  举报