里面有不懂的内容参见:webpack 打包
下面操作,按照步骤来
1.安装 webpack-dev-server 到对应项目目录
命令:npm i webpack-dev-server -d
注意:-d 是打包,代表当前目录的意思
2.运行
- 安装完毕后,这个工具的命令用法,和 webpack 一样
- 由于在项目本地安装 webpack-dev-server ,所以无法全局 cmd 中运行(只有那些安装到全局 -g 的工具,才能在 cmd 中直接运行)
- 而且要求本地安装 webpack
解决:
先在 package.json文件 中添加 "dev": "webpack-dev-server"
之后命令符调用:npm run dev
注意:如果报下面错误
则是因为没有局部安装 webpack 的包,对应文件下安装命令:
npm i webpack webpack-cli -s
( 顺带安装webpack-cli比较好 )
最后运行之后,会发现每次修改 main.js 文件内容,都会自动执行打包
3.运行 webpack-dev-server 解释
浏览器输入:http://localhost:8080/
注意:
-
若是发现点击了 src 效果没变,可以在 index 中文件引入路径变为下面根路径(但是,实际引入路径,还是图片上面注释掉的),这是暂时的,为了方便观察
-
为了迅速 webpack-dev-server 帮我们打包生成的 bundle.js 文件,并没有存放到实际物理磁盘上;而是,直接托管到了电脑的内存中,所以,我们在项目的根目录中,根本找不到这个新打包好的 bundle.js 文件
-
可以认为,webpack-dev-server 帮我们打包的文件,以一种虚拟的形式,托管到了项目的根目录中,虽然看不见,但可以认为,和 dist src node_modules 平级,有一个看不见的文件,叫做 bundle.js
5.实例化项目文件 html-webpack-plugin
作用:
- 1.自动在内存中根据指定页面生成一个内存的页面
- 2.自动把打包好的 bundle.js 追加到页面中去
1.安装 html-webpack-plugin
命令:npm i html-webpack-plugin -d
2.在 webpack.config.js 文件中设置
头部添加引用插件:
// 导入在内存中生成 HTML 页面的插件
// 只要是插件,都要放到 plugins 节点中去
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports 中添加节点:
plugins:[
new htmlWebpackPlugin({
// 创建一个在内存中生成 HTML 页面的插件
// 指定 模板页面,将来会根据指定的页面路径,去生成内存中的页面
template:path.join(__dirname,'./src/index.html'),
// 指定生成的页面的名称
filename:'index.html'
})
]
至此,头部的所有引用都不需要了,最后,命令行中重新跑:npm run dev
,查看对于项目页面
html-webpack-plugin 自动生成并引用链接
4.修改 dev-server
实现效果:
- 运行(代码或地址)直接打开项目页面
- 无刷新的页面更新
- 修改端口
法一:修改 package.json 下的 dev(推荐)
修改:"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
- open:代码修改保存完运行,直接打开
http://localhost:8080
- port:修改端口号:8080,为端口号:3000
- contentBase:代码修改保存完运行或是浏览器输入
http://localhost:8080
,直接打开http://localhost:8080
下的 src文件,展示项目网页 - hot:无需刷新页面,即可看见修改代码保存后的效果;而且只是局部更新打包,减少不必要的打包,速度变快
法二:修改 webpack.config.js 下的 module.exports(有些麻烦)
第一步添加 devServer:
devServer: {
// 这是配置 dev-server 命令参数的第二种形式,相对来说麻烦一些
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启动热更新的第一步
}
第二步启用热更新:
// 启用热更新的第二步
var webpack = require('webpack');
第三步配置插件的节点:
plugins:[
// 配置插件的节点
// new 一个热更新的模块对象,这是启用热更新的第三步
new webpack.HotModuleReplacementPlugin()
]