第六节:Wepack开发环境搭建:devServer

前言:

1. 之前所学些的,每次都需要手动的打包,
2. 如果现在修改了开发代码以后,页面不会有任何变化,
3. 原因在于,页面显示的内容是打包后的文件内容

因此我们需要搭建一个开发环境, webpack提供了一个devServer帮我们搭建开发环境

1. devServer认识理解

1.1 为什么需要devServer

1. 在开发时,可能随时需要调整代码内容
2. 因此我们希望我们调整的内容可以实时的显示在页面上,有利于开发调试
3. 当一切都开发完毕了以后在最终打包上线,

1.2 对于devServer的理解

1. devServer是webpack提供的一个开发服务器,
2. devServer会自动化构建:自动编译,自动打开浏览器,自动刷新浏览器
3. devServer的特点是在内存中编译打包,不会生成任何打包文件,
4. 因此当关闭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了

一但服务启动成功,我们在开发区域写的任何内容都会实时编译到浏览器上