webpack的概念
webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境。
webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性
webpack的基本使用
- 创建项目目录并初始化,初始化包管理配置文件package.json
npm init -y
- 新建src源代码目录
- 新建src->index.html首页
- 初始化首页基本结构
- 运行
npm install jquery -S
安装JQuery - 通过模块化的形式,实现列表隔行变色
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<input type="text" placeholder="ceshi" />
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
</body>
</html>
index.js文件
import $ from "jquery"
$(function(){
$("li:odd").css("backgroundColor","pink");
$("li:even").css("backgroundColor","lightblue");
})
这种写法有问题,因为index.js文件中使用了import,这属于ES6的语法了,浏览器不兼容,所以需要使用webPack来打包
安装和配置WebPack
- 运行
npm install webpack webpack-cli -D
安装webpack相关的包 - 在根目录中,创建名为
webpack.config.js
的webpack配置文件 - 在webpack.config.js配置文件中,初始化如下基本配置
module.exports={
mode:'development'//mode用来指定构建模式,这是开发模式,生产模式为production
}
- 在package.json配置文件中的scripts节点下,新增dev脚本
"scripts":{
"dev":"webpack" //scripts节点下的脚本,可以通过npm run执行
}
- 在终端运行
npm run dev
,启动webpack进行项目打包
在运行完以上步骤后,会自动生成一个dist目录,且在dist目录中生成main.js文件,在index.html中更改<script src="../dist/main.js"></script>
配置打包的入口与出口
webpack的4.0版本默认约定:
- 打包的入口文件为src->index.js
- 打包的输出文件为src->main.js
如果要自定义打包的入口和出口,则需要更改webpack.config.js中的配置信息
const path = require("path") //导入node.js中专门操作路径的模块
module.exports = {
entry:path.join(__dirname,"./src/index.js"),//打包入口文件的路径 __dirname是该文件的当前目录
output:{
path:path.join(__dirname,"./dist"),//输出文件的存放路径
filename:"boundle.js" //输出文件的名称
}
}
配置webpack自动打包
为什么要自动打包?如果修改某些js文件进行保存不会热重载,需要手动执行npm run dev
- 安装自动打包工具
npm install webpack-dev-server -D
- 修改package.json ->scripts中的dev命令:
"scripts":{
"dev":"webpack-dev-server" //scripts节点下的脚本,可以通过npm run执行
}
- 将src->index.html中script节点下的脚本路径修改为
路径/boundle.js
,因为自动打包会将生成的js文件托管到根目录下(在内存中),至于是哪个路径,默认http://localhost:8080/ - 运行
npm run dev
重新打包
注意:webpack-dev-server会启动一个实时打包的http服务器,
webpack-dev-server 打包生成的输出文件,默认放到项目根目录,而且是虚拟的在项目中看不到
生成预览界面
设置访问路径打开默认的界面
- 运行
npm install html-webpack-plugin -D
命令,安装生成预览页面的插件 - 修改webpack.config.js文件头部区域,添加如下内容
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
template:"./src/index.html",//设定作为默认页面的文件
filename:"index.html" //指定生成文件的名称,存储于内存中,在目录中不显示
});
- 修改webpack.config.js文件中向外暴露的插件配置对象
module.exports ={
plugins:[htmlPlugin] //plugin数组是webpack打包期会用到的插件
}
- 在终端运行
npm run dev
,启动webpack进行项目打包
配置自动打包相关的参数
上面使用webpack自动打包完成后,需要手动在浏览器中输入网址,自动打开浏览器的设置如下:
//package.json中的配置
//--open 打包完成后自动打开浏览器
//--host 配置IP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}