1.npm包管理工具
npm init -y
如果创建的项目的根目录名称是中文或者包含中文，不能使用-y
npm init
回车时要求你输入包的名称，自己手写项目名称，例test
2.新建src,dist文件夹
src
--index.html 首页
--main.js 项目的JS入口文件
将main.js文件打包引入到index.html，这里的webpack是全局安装的
webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development
<script src="../dist/bundle.js"></script>
3.自动打包
（1）安装工具webpack-dev-server,实时打包
cnpm i webpack-dev-server -D
提示需要安装webpack依赖
cnpm i webpack -D
（2）项目根目录下新建配置文件
webpack.config.js
//由于webpack是基于Node进行构建的，所以，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
//向外暴露一个配置对象
//当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.exports={
entry:path.join(__direname,'./src/main.js'),//入口文件
output:{//指定输出选项
path:path.join(__direname,'./dist'),//输出路径
filename:'bundle.js'//指定输出文件的名称
}
}
此时，命令行不需要输入入口文件和出口文件，只需要输入webpack就可打包
（3）实时更新
package.json
"scripts":{
"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}
webpack output is served from / 托管的目录是根路径
(4)安装插件html-webpack-plugin
cnpm i html-webpack-plugin -D
webpack.config.js
//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果过要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin=require('html-webpack-plugin')
plugins:[//所有webpack 插件的配置节点
new htmlWebpackPlugin({
template:path.join(__direname,'./src/index.html'),//指定模板文件路径
filename:'index.html' //设置生成的内存页面的名称，只有名称为index.html才能被浏览器自动打开
})
]