webpack快速入门-开发服务器(webpack-dev-server)

在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

编写代码
控制台运行命令完成打包
打开页面查看效果

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境

为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server

它既不是plugin也不是loader

接下来看看它怎么用

下载依赖

npm i webpack-dev-server -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',  // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'),  // 模板文件的路径
        })
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

配置命令

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
}

执行命令

npm run dev

当在使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

查看本系列文章合集click me

下载本系列文章源码click me