使用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
使用Webpack之后 可以在JS脚本文件里引入另外的JS脚本文件
由Webpack来处理JS文件之间的互相依赖关系
这就使得 整个页面只引入一个JS文件成为可能
import ... from ...这种语法是ES6中导入模块的方式 会自动从node_modules里导入指定的包
import $ from "jquery" // 导入JQuery模块
$(function()
{
$("li:odd").css("backgroundColor","red")
$("li:even").css("backgroundColor","blue")
})
由于ES6的代码过于高级 浏览器浏览器不识别 解析不了 因此在浏览器中该行的执行会报错
此时 可在项目根目录下 输入webpack ./src/main.js -o ./dist/bundle.js
这代表着 用webpack对src目录下的main.js进行打包处理 处理完毕后的文件是dist目录下的bundle.js
语法：webpack 要打包的文件的路径 -o 输出的打包好的文件路径
经过Webpack的打包处理 解决了兼容性的问题 可在页面中直接引用
Document
- 1
- 2
- 3
- 4
四、在配置文件中指定打包路径
每当修改js原文件 都需要重新进行一次webpack的打包
然而 每次要指定原文件路径和输出文件路径
通过修改Webpack的配置文件 可实现只输入webpack即可自动打包
webpack.config.js的配置文件(该名称是固定的)：
由于webpack是基于Nodejs构建的 因此可使用Nodejs中的语法
// 导入path模块
const path=require("path")
// 该配置文件通过Node语法中的模块操作 向外暴露配置对象
module.exports={
entry:path.join(__dirname,"./src/main.js"), // 指定要使用webpack打包的文件的路径和名称
output:{
path:path.join(__dirname,"./dist"), // 指定使用webpack打包后输出的文件的路径
filename:"bundle.js" // 指定指定使用webpack打包后输出的文件的名称
}
}
如此配置完毕之后 输入webpack 就相当于输入webpack ./src/main.js -o ./dist/bundle.js了
其执行顺序是：
1、webpack发现用户并没有在命令中指定打包入口和出口 2、随后 webpack就会去项目根目录中查找名为webpack.config.js的配置文件 3、当找到配置文件后 webpack会解析该配置文件 解析完毕之后 得到文件中配置的配置对象(即module.exports暴露的配置对象) 4、webpack拿到配置对象后 即可成功获得配置对象中指定的入口和出口 再根据该入口和出口进行打包构建作者：Piconjo_Official
