示意如下：
引入打包后的js
把上面打包完成的main.js引入到index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入打包后的.js文件 -->
<script src="./dist/main.js"></script>
</body>
</html>
示意图如下：
好的，现在你已经可以看到这个代码可以正常工作了吧。
小结
认识webpack的配置文件
了解配置文件
工具运行的默认参数配置会放置在某个具体的文件。
例如：迅雷/百度网盘下载的文件保存在哪里？
配置文件的作用
- 是否特殊指定使用哪个配置文件？
a. 是。找到这个指定的配置文件
b. 否。去项目根目录找是否有一个名为webpack.config.js的文件。
ⅰ. 找到。使用即可。
ⅱ. 找不到。采用默认配置。
创建并使用默认配置文件
在项目根目录下创建一个名为webpack.config.js。其内容如下：
module.exports = {
mode: 'development', // 打包方式
}
这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。
然后，再次运行打包命令，查看产生的main.js文件的内容，对比与之间的变化。
小结
- webpack的默认配置文件的名字是？
- 配置文件的作用是？
设置入口和出口
在配置文件中，配置自定义的入口和出口
入口和出口
入口文件： 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块，这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。
出口文件：指定了最后打包之后的文件，重点是这个文件的具体位置。
在webpack中，默认的入口和出口分别是：
- 默认入口是：./src/index.js
- 默认出口是：./dist/main.js。
也就是说，如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下。
了解默认入口文件
修改目录结构，新建一个src目录，并把index.js，tool.js，tooles6.js移动到它下面。
项目名
├── index.html
├── src
│ ├── index.js
│ └── tool.js
└── package.json
直接省略入口文件，直接打包： npx webpack 由于在src目录已经存在index.js
再来测试一下。
设置入口文件
需求：如果在实际开发中，希望：
- 这个入口文件不是index.js，而是main.js
- 整体js文件不是放在src目录下，而是src/js下。
解决：
(1) 调整目录结构如下：
项目名
├── index.html
├── src
│ └── js
│ ├── main.js
│ └── tool.js
├── webpack.config.js # webpack的配置文件
└── package.json
(2) 然后，修改配置项
- 修改src/index.js的名字为src/js/main.js
- 在webpack.config.js的配置项中添加
entry项
module.exports = {
mode: 'development', // 打包方式
entry:'./src/js/main.js' // 入口文件
}
- 重新打包，测试。
指定出口文件
在webpack.config.js中设置output项。
目标： 把出口文件设置为在build目录下的bundle.js
// 引入nodejs中的核心模块
const path = require('path')
console.log(path.join(__dirname,'/build'))
module.exports = {
mode: "production",
entry: './src/js/main.js', // 入口文件
output: {
"path": path.join(__dirname,'/build'), // 决定出口文件在哪里
"filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
}
}
说明：
- output中的filename用来指定打包后的文件名字。
- output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
- 如果path中的路径不存在，它会自动创建。
