前言:
- 之前所学些的,每次都需要手动的打包,
- 如果现在修改了开发代码以后,页面不会有任何变化,
- 原因在于,页面显示的内容是打包后的文件内容
因此我们需要搭建一个开发环境, webpack提供了一个devServer帮我们搭建开发环境
1. devServer认识理解
1.1 为什么需要devServer
- 在开发时,可能随时需要调整代码内容
- 因此我们希望我们调整的内容可以实时的显示在页面上,有利于开发调试
- 当一切都开发完毕了以后在最终打包上线,
1.2 对于devServer的理解
-
devServer是webpack提供的一个开发服务器, -
devServer会自动化构建:自动编译,自动打开浏览器,自动刷新浏览器 -
devServer的特点是在内存中编译打包,不会生成任何打包文件, - 因此当关闭
devServer时,会自动清理内存,在开发阶段非常有用
2. 配置devServer
devServer需要通过webpack-dev-server运行,所以我们需要下载这个包
2.1 下载webpack-dev-server
$ yarn add webpack-dev-server -D
2.2 配置devServer
代码如下:
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename:"bundle.js",
path:resolve(__dirname,'dist')
},
module:{
rules:[
{
test: /\.css$/,
use:["style-loader","css-loader"]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
})
],
mode:"development",
// devServer配置
devServer:{
// 项目构建后的路径
contentBase: resolve(__dirname,"dist"),
// 启动gzip压缩
compress:true,
// 端口号
port: 3000,
// 自动打开浏览器
open:true
}
}
2.3 配置运行脚本
在package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
...
}
一切就绪以后,就可以用在控制台,通过npm run dev来启动devServer了
一但服务启动成功,我们在开发区域写的任何内容都会实时编译到浏览器上
