webpack5-打包其他资源以及devServer的配置

webpack5打包其他资源

其他资源：其他资源指一些不需要做任何处理（例如不需要压缩，优化等处理），只需要原封不动的输出，比如字体图标

打包其他资源可以用file-loader

其他资源应该怎么识别呢？我们可以使用exclude排除html、css、js、less等资源（这个根据实际项目进行排除），剩余的为其他资源。

            // 打包其他资源(除了html，js,css，less等资源以外的资源)
            {
                // 使用exclude排除html，js,css，less等资源
                exclude: /\.(css|html|js|less|png|jpg|gif)$/,
                loader: 'file-loader'
            }

devServer

通过前面的学习，我们可以发现每次修改代码之后，我们都需要在执行webpack命令重新编译打包，很不方便。devServer可以帮助我们解决这个问题，只要编译打包过之后，我们再修改代码，devserver就会自动帮我们编译打包，自动刷新浏览器。

devServer需要webpack-dev-server库，安装webpack-dev-server

webpack4中devServer的配置

    // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    devServer: {
        // 项目构建后的路径，也就是代码要运行的项目目录
        contentBase: resolve(__dirname, 'build'),
        //compress是否启动gzip压缩，让代码体积更小，速度更快
        compress: true,
        // 制定开发服务器的端口号
        port: 3000,
        // open是否自动打开浏览器，打开的是默认浏览器。
        open: true,
        hot: true
    }

webpack5中devServer的配置

    // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    devServer: {
        // 项目构建后的路径，也就是代码要运行的项目目录
        static: resolve(__dirname, 'build'),
        //compress是否启动gzip压缩，让代码体积更小，速度更快
        compress: true,
        // 指定开发服务器的端口号
        port: 3000,
        // open是否自动打开浏览器，打开的是默认浏览器。
        open: true,
        hot: true
    }

执行npx webpack-dev-server命令之后，会自动打开浏览器，如果修改了代码之后，浏览器也会自动刷新，不需要值重新打包编译。