0、前注
本文内容源于webpack中文文档，以及我自己实践中写的若干DEMO。
每个DEMO以文件夹为单位，从入门到进阶，根据文件夹编号为准，逐步递进。
成文时，webpack版本是【3.8.1】
0.1、安装webpack
首先你需要安装Node.js，点击打开Node.js下载页面。安装完Node.js后，会自带npm包管理器。
npm install webpack -g
这个命令将安装最新版本的webpack（全局，学习教程中推荐，避免多次安装。但实践中还是有必要一个项目一个webpack，避免版本冲突带来的bug）
目前版本是3.8.1（2017/11/27）
webpack -v
查看当前webpack版本
执行命令：
以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。
快速抵达对应目录的控制台（win）：
在对应目录下，按住 shift，然后点击鼠标右键，在弹窗里选择在此处打开命令窗口即可启用
1、webpack基本结构
文件目录见1、最简单的webpack实例这个目录。
// webpack.config.js 这个是webpack的管理配置文件
// 以CMD的格式导出模块
module.exports = {
// 入口文件，指向app.js
entry: './app.js',
// 出口文件
output: {
// 文件名，将打包好的导出为bundle.js
filename: './bundle.js'
}
}
// app.js 这个是入口文件
import bar from './bar'
bar()
// bar.js 这个是入口文件引入的模块
export default function bar () {
console.log('bar')
}
// page.html 这个是html目录文件，这个文件引入入口文件
<html>
<head>
<title>1、最简单的webpack实例</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>控制台执行webpack（或者 webpack --config webpack.config.js ），会显示如下内容：
D:\study notes\Project\webpack_learner\1、最简单的webpack实例>webpack
Hash: 2fdcc03878d7c5480ce6
Version: webpack 3.8.1
Time: 58ms
Asset Size Chunks Chunk Names
./bundle.js 3.13 kB 0 [emitted] main
[0] ./app.js 115 bytes {0} [built]
[1] ./bar.js 142 bytes {0} [built]打完后的bundle.js文件内容略。这个时候打开html文件，查看控制台，会发现正常输出了bar。
时间： 2024-12-25 16:40:13