1、安装webpack（局部安装webpack）。
npm i webpack webpack-cli -D
2、安装成功之后，你会在package.json文件中看到这个。
3、新建webpack.config.js文件，里面写配置编译模式，入口出口等（这里演示的是单入口打包）
// 导入node.js中专门操作路径的模块
const path = require('path');
module.exports={
// 编译模式：开发阶段（production上线模式）
mode:'development',
// 入口
// dirname:表示项目所在目录的根路径。
entry: path.resolve(dirname, 'src/index.js'),
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
// 输出文件名称
filename: 'bundle.js',
// publicPath:指定基础路径，开发环境一般是项目的根路径，上线之后一般是CDN的路径。
publicPath: './'
}
}
4、在package.js中配置打包命令。（不加 –mode development，默认打包是生产环境，打包出来的代码会默认压缩）
"build": "webpack --mode development",
5、打包成功。此时你的项目中会多出一个dist文件。里面是打包好的js文件。
6、最后需要了解webpack支持配置多入口及多出口文件。并且webpack默认只能打包处理.js结尾的模块。所以正对非.js文件，比如css,less等文件需要安装对应的loader并配置loader规则。
6.1打包处理css文件。
安装css的loader。
npm i style-loader css-loader -D
在webpack.config.js文件中配置loader规则：
// 导入node.js中专门操作路径的模块
const path = require('path');
module.exports={
// 编译模式：开发阶段（production上线模式）
mode:'development',
// 入口
// dirname:表示项目所在目录的根路径。
entry: path.resolve(dirname, 'src/index.js'),
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
// 输出文件名称
filename: 'bundle.js',
// publicPath:指定基础路径，开发环境一般是项目的根路径，上线之后一般是CDN的路径。
publicPath: './'
},
// 配置loader规则
rules:[
// 配置css文件的loader规则
{test:/.css$/,use:['style-loader','css-loader']},
// 配置less文件的loader规则
{test:/.less$/,use:['style-loader','css-loader','less-loader']}
]
}
7、针对高级js语言兼容低版本浏览器，需要安装babel。
