05-开发服务器：devServer自动化（编译、打开浏览器、更新内容）

webpack.config.js中代码

    mode:'development',
    //开发服务器devServer，用来自动化
    //特点：只会在内存中编译打包，不会有任何输出，不输出build文件。。。
    //需要安装包：npm i webpack-dev-server
    //启动devServer指令，npx webpack-dev-server
    
    devServer:{
        //我要运行的目录,不是原代码,
        contentBase:resolve(__dirname,'build'),
        //启动zGip压缩，更小更快
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true
    }

页面需要刷新才更新。
注意版本

image.png

代码如下

//webpack配置文件，配置如何进行打包
//5部分，entry，output，loader，plugins，mode
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
    entry:'./src/index.js',
    output:{
        filename:'out.js',
        path:resolve(__dirname,'build'),
        publicPath: './'//devServer上如果没配置，就会找到这里
    },
    module:{
        rules:[
            {
               test:/\.css$/,
               use:[
                   'style-loader',
                   'css-loader'
               ]
            },
            {
               test:/\.scss$/,
               use:[
                   'style-loader',
                   'css-loader',
                   'sass-loader'//基于node-sass
               ]
            },
            {
                test:/\.less$/,
                use:[//use使用数组就是用多个loader处理
                    'style-loader',
                    'css-loader',
                    'less-loader'//基于less
                ]
            },
            //webpack发现页面中多次引用同一张图片，只打包一次这张图片
            {//处理图片 处理样式中的图片用url-loader
                test:/\.(jpg|png|gif)$/,
                //url-loader是依赖file-loader的，需要下载两个包
                loader:'url-loader',//只用一个loader处理，可以不用use，直接用loader，loader上的配置在options选项中
                options:{
                    //当打包的图片小于8*1024时候，会转成base64位图片
                    //优点减少页面请求数量，减少服务器压力
                    //缺点体积增大，文件请求速度变慢
                    //输出的图片只会是>8kb的图片
                    limit: 8*1024,//我们通常会对8-12kb以下图片进行base64位处理
                    name:'[hash:10].[ext]',//不想让base64的图片名字太长，hash名字取10位+.+原来的后缀（ext）
                    esModule:false
                }
            },
            {//处理html中的img图片    
                test: /\.html$/,
                loader:'html-withimg-loader'    
            }
            ,
            {//处理其他资源，例如字体,除了html、js、css以外的资源
                //如果使用exclude，一定要排除的全面，否则各种报错
                exclude:/\.(html|css|js|scss|less|jpg|png|gif)$/,//exclude是排除  test是检测，都是正则
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            },
        ]
    },
    plugins:[

        //功能：默认会创建一个空的html，自动引入打包输出的所有js、css资源
        //需要有html，所有需要传入配置template，找对应的文件
        //原html模板页，不需要引入打包的js、css
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    //开发服务器devServer，用来自动化
    //特点：只会在内存中编译打包，不会有任何输出，不输出build文件。。。
    //启动devServer指令，npx webpack-dev-server需要包：webpack-dev-server
    //Cannot find module 'webpack-cli/bin/config-yargs'
    //原因ebpack的版本与webpack-dev-server的版本不兼容。
    devServer:{
        //我要运行的目录,不是原代码,
        contentBase:resolve(__dirname,'build'),
        //启动zGip压缩，更小更快
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true
    }
}