webpack的使用，看这一篇就够了

目录

一、安装webpack

二、配置webpack

三、自定义打包的入口和出口

四、webpack插件的使用

五、webpack中的loader

六、配置webpack的打包发布

---

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

首先在安装webpack之前，你的本地环境需要先安装node.js 的环境。

一、安装webpack

在终端运行以下命令，安装webpack相关的包文件

npm install webpack@5.5.5 webpack-cli@4.2.0 -D

二、配置webpack

1.在项目根目录中，创建名为webpack.config.js的配置文件，并初始化以下配置：

module.exports = {
    mode: 'development'   //mode 用来指定构建模式，可选值有development和production
}

//mode 的可选值有两个
// 1.development  开发环境，不会对打包生成的文件进行代码压缩和性能优化，且打包速度快，
//   适合在开发阶段使用。
// 2.production   生产环境，会对打包生成的文件进行代码压缩和性能优化，且打包速度很慢，
//   仅适合在项目发布阶段使用。

webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

2.在package.json文件中的scripts节点下，新增dev脚本：

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

注意：配置webpack后，在index.html中导入的js文件应该为打包后的dist/js/main.js文件

 

三、自定义打包的入口和出口

在webpack中默认的打包入口文件为src下的index.js文件，默认的输出文件路径为dist 下的main.js文件。

但是，开发者可以自定义打包的入口和出口文件：

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口，如下所示：

const path =require('path')  //导入 node.js 中专门操作路径的模块

module.exports = {
  entry: path.join(__dirname, './s