5.0 webpack devServer

键盘起火

于 2024-03-29 23:23:25 发布

阅读量368

点赞数 2

分类专栏： Webpack4 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_44472131/article/details/137159152

版权

Webpack4 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文讲述了作者重拾Webpack时，对devServer的配置，包括热更新功能、自动化构建过程以及如何解决Webpackv16中遇到的问题，如自动打开浏览器和图片处理策略。

摘要由CSDN通过智能技术生成

#虽然作为一个前端已经耕耘此行业有三五个年头，但都是在业务中未曾精进，怀着初心，重识Webpack，砥砺前行💪#

devServer 处理热更，解决之前每次改变都需要手动构建
开发服务器devserver ：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点：内存中编译打包，不会有任何输出*
启动指令： npx webpack-dev-server
这里开始使用的v16 不然会报fs模块找不到的错误
修改html文件并不会热更新
调用命令变成npx webpack server

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        // loader 配置
        rules: [
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                // 处理以Url()形式引入图片信息 
                test: /\.(jpg|png|gif|jpeg)$/,
                use: [
                    {
                        // 需要url-loader和file-loader 两个包
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb就会被base64处理
                            // 优点： 减少请求数量（减轻服务器压力）
                            // 缺点： 没有在限制内的图片还是会通过服务器请求，因为体积过大，造成文件请求速度变慢
                            limit: 8 * 1024,
                            // hash 取文件hash的前10位， ext用文件自己的后缀名
                            name: '[name].[ext]',
                            // 问题： 因为url-loader默认使用es6模块化解析，而html-laoder引入图片是commonjs
                            // 解析时会报错 原本引入的地方会显示成【object Module】
                            // 解决： 关闭url-loader的es6模块化，使用commonjs
                            esModule: false,
                        }
                    }
                ],
                // webpack4 升级到webpack5的配置，防止多打包生成无效引用
                type: 'javascript/auto'
            },
            {
                // 处理img标签引入图片信息
                test: /\.html$/,
                // 处理html文件中的img图片 （负责引入img 从而被url-loader进行处理）
                loader: 'html-loader'
            },
            // 打包其它资源（html,js,css资源以外的资源）
            {
                // 排除css/js/html资源
                exclude: /\.(css|js|html|less|jpg|png|gif|jpeg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:10].[ext]',
                    esModule:false,
                },
                 type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        // plugins 配置
        // 打包html 需要 html-webpack-plugin 包
        new HtmlWebpackPlugin({
            // 定义html 模版入口 自动打包所有的资源（js/css）
            template: './src/index.html',
        }),
    ],
    // 开发服务器devserver ：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    // 特点：内存中编译打包，不会有任何输出
    // 启动指令： npx webpack-dev-server
    devServer : {
        static: './build',
        // 启动gzip
        compress:true,
        // 端口号
        port:3000,
        //自动打开浏览器
        open:true,
        // 热模块替换
        hot:true
    },
    mode: 'development',
}