webpack 的安装与使用

一、什么是 webpack ？

webpack 是一个流行的前端项目构建工具（打包工具）

二、 在项目中安装和配置 webpack

① 新建项目空白目录，并运行 npm init –y 命令，用于初始化包管理配置文件 package.json

② 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包

③ 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，配置以下内容：

module.exports = {
   
	// mode 用来指定构建模式，平时建议使用development模式，项目上线才使用production模式
	mode: 'development' 
}

④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
   
	"dev": "webpack" 
}

⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包

⑥ 在项目根目录中就会自动生成一个dist文件夹，我们只需要把里面的main.js引入到项目中即可

三、如何自定义打包的入口与出口

① webpack 默认规定：打包的入口文件为 src -> index.js 、打包的出口文件为 dist -> main.js

② 如果想要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置信息：

const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
   
    entry: path.join(__dirname