一、简介
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
二、Webpack安装
1、全局安装
npm install -g webpack webpack-cli
2、创建js文件用于打包操作
1、创建三个js文件
*在common.js utils.js定义方法
*在mian.js引入common和utils
3、创建webpack配置文件,配置打包信息
webpack.config.js
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
4、使用命令执行打包操作
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
最终测试:
创建01.html文件,引入打包之后js文件,使用浏览器查看效果