webpack3 安装配置、基本应用_安装webpack3-CSDN博客

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104115918

webpack
	构建工具
	(1)自带模块换(commonjs规范)
	(2)编译es6->es5,jsx-es5
	(3)自带服务器,webpack-dev-server
	(4)react,vue使用该环境

安装webpack
1、安装全局webpack
	cnpm/npm install -g webpack@3.x

2、项目初始化package.json
	npm init -y

3、安装项目依赖的webpack
	cnpm install -D webpack@3.x
4、项目根目录创建两个文件夹src和dist
	src:源码文件
	dist:编译之后的文件
5、编写代码
	src文件下的app.js文件内容:document.write('hello webpack');
6、执行webpack
	webpack 入口文件 出口文件
	例:webpack src/app.js dist/boundle.js

代码示例:

页面添加一个div示例:

nodejs文件:

module.exports=function(){
	var hello=document.createElement('div');
	hello.innerHTML='hello webpack3.x';
	return hello;
}

待打包文件:

var hello=require('./hello.js');
document.getElementById('root').appendChild(hello());

命令行打包代码:

webpack src/app.js dist/boundle.js

引入打包后文件,因为要使用页面元素,所以要放在最后

<html>
<head>
	<meta charset="utf-8">
	<title ></title>
</head>
<body >

	<div id='root'>
	</div>

	<script src='boundle.js'></script>

</body>
</html>