什么是webpack?
- webpack是一个模块化工具(a module bundle)
- gulp是一个任务运行器(a task runner)
学习webpack之前,需要先理解四个核心概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
安装与使用
创建package.json文件
npm init
如果想要快捷安装的话,使用下面的命令(-y 表示使用默认参数)
npm init -y
package.json文件说明:
安装
webpack可以直接使用npm安装,因为我们需要使用webpack这个命令,所以必须要全局安装
npm i webpack -g
然后在项目中安装
npm i webpack -S
npm i webpack-cli -S
解决办法:全局安装一下webpack-cli即可
npm i webpack -g
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
配置webpack.config.js
module.exports = {
mode:'development', // 当前的开发模式
entry: __dirname + "/src/main.js",// 入口文件
output: {
path: __dirname + "/dist",// 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
}
}
如果配置完成之后,在项目终端输入:
webpack
就会看到以下信息