文章目录
1 介绍1.1 版本4.x
2 安装2.1 基本安装2.1.1 全局安装2.1.2 项目安装2.1.3 项目其他安装
2.2 配合安装2.2.1 项目安装
3 使用3.1 搭建项目结构3.1.1 创建项目文件夹3.1.2 初始化项目3.1.3 创建需要的文件夹3.1.4 创建所需的文件3.1.5 创建入口文件3.1.6 项目搭建完成
3.2 打包3.2.1 工具3.2.2 警告配置1 配置2 使用
3.3 实时编译3.3.1 工具 webpack-dev-serve3.3.2 工具安装1 执行命令2 配置
总结问题一:报错找不到
推荐版本安装
1 介绍
1.1 版本4.x
2 安装
2.1 基本安装
2.1.1 全局安装
cnpm i webpack -g
2.1.2 项目安装
cnpm i webpack -D
2.1.3 项目其他安装
cnpm i webpack -S
2.2 配合安装
2.2.1 项目安装
cnpm i webpack-cli -S
3 使用
3.1 搭建项目结构
3.1.1 创建项目文件夹
mkdir wbp
3.1.2 初始化项目
执行以下命令后,在项目根目录下产生package.json文件
npm init -y
3.1.3 创建需要的文件夹
dist 项目完成后的打包文件src 项目开发的源文件(之后开发所在的文件夹)
cd wbp
mkdir dist
mkdir src
3.1.4 创建所需的文件
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
</head>
<body>
<h1> index 主页
</h1>
</body>
</html>
3.1.5 创建入口文件
在4.x中,约定默认大于配置
默认打包src/index.js ------> dist/main.js所以创建以下文件 src/index.js
console
.log('hello webpack!')
3.1.6 项目搭建完成
3.2 打包
3.2.1 工具
使用webpack-cli依赖该依赖提供直接执行webpack将会打包
webpack
3.2.2 警告配置
1 配置
创建wbp/webpack.config.js文件mode默认为生产模式—>production
module
.exports
= {
mode
: "development"
}
2 使用
执行打包命令
webpack
3.3 实时编译
在node中我们使用nodemon可以一直挂载着app.js,只要文件发生改变就编译在使用打包命令后,文件更改后,不会自动编译
3.3.1 工具 webpack-dev-serve
是可以进行挂载式编译的工具所挂载的文件是运行在内存中,所有运行速度快
3.3.2 工具安装
1 执行命令
cnpm i webpack-dev-serve -D
2 配置
总结
问题一:报错找不到
推荐版本安装
参考链接package.json 文件
{
"name": "test2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2",
"webpack-hot-middleware": "^2.22.0",
"webpack-merge": "^4.1.1"
}
}
由于vscode 启用的默认端口为5500,webpack-dev-server启动的为8080端口因此会出现找不到文件的错误webpack-dev-server 挂载的文件在内存中
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="http://localhost:8080/main.js"></script
>
</head
>
<body
>
webpack
</body
>
</html
>
