webpack基本配置--devserver

devserver可以想象成开发服务器，那么它的作用是什么呢？

• 自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  由于配置需要测试一些内容，我引用上篇的其他资源打包的例子，继续配置关于devserver的几行代码
  devserver配置如下述代码：

const HtmlWebPackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // 打包其他资源(除了css|js|html|less|sass|json|jpg|png|gif资源以外的资源)
            {
                exclude:/\.(css|js|html|less|sass|json|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',


    // 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器，自动刷新浏览器~)
    // 特点:只会再内存中编译打包,不会任何输出
    // 启动devServer指令为：npx webpack-dev-server
    // 安装 webpack-dev-server
    devServer:{
        // 运行打包后项目文件路径
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true
    }
 
}

配置好之后可以自己试试在终端输入npx webpack-dev-server命令
下篇我将前面打散的html资源，css资源，图片资源，其他资源的打包知识点，总结在一篇文章里请期待！