使用Webpack对JS文件进行打包构建并在配置文件中指定打包路径

一、介绍

Webpack 简称模块打包机
在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等
引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系

Webpack是前端的一个项目构建工具 基于Node.js开发
因此 若要使用webpack 必须先安装Node.js

借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能

示意图：

官网：https://webpack.github.io

---

二、安装

在新版本中 需要分开安装webpack和webpack-cli

安装webpack：

• 方式一：运行npm i webpack -g全局安装webpack 这样就能全局使用webpack的命令了
  

• 方式二：在项目根目录运行npm i webpack --save-dev以安装到项目依赖中
  

(注：可能是我的webpack是最新版本的关系 我只有方式二可用 我用了方式一安装后还是提示未安装webpack 有了解的大佬可在评论留言解惑)

安装webpack-cli：

在项目根目录下输入npm install webpack-cli -g 进行全局安装

---

三、打包

用Webpack打包 可以实现兼容性的转换

不推荐直接在页面文件里引用任何包和任何css文件 这会拖慢项目的加载速度
可在一个单独的JS文件里定义 这样 只需加载该JS文件即可

示例目录：

• src 存放源代码

  • css
  • images
  • js
  • index.html 首页
  • main.js 项目的JS入口文件

• dist 项目发布目录

1、首先 初始化npm

2、用npm安装所需的包

3、编写JS入口文件(被打包的文件)

使用Webpack之后 可以在JS脚本文件里引入另外的JS脚本文件
由Webpack来处理JS文件之间的互相依赖关系
这就使得