webpack 配置devServer 服务器

迷南。 2023-01-09 12:35 139阅读 0赞

# webpack 配置devServer 服务器 #

/**
     * loader: 1. 下载 2. 使用（配置）
     * plugins：1. 下载 2. 引入 3.使用
     */
    
    
    // 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    
    module.exports = {
        
        // webpack 配置
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                // 详细 loader 配置
                
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html'
            })
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    
    
        // 开发服务器 derServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器。。。）
        // 特点：只会在内存中编译打包，不会有如何输出
        // 安装：npm i npx webpack-dev-server -D
        // 启动 derServer 指令为：npx webpack-dev-server
        devServer: {
        
            // 项目构建后的路径
            contentBase : resolve(__dirname, 'dist'),
            // 启动 gzip 压缩
            compress : true,
            // 端口号
            port : 3000,
            // 自动打开本地默认浏览器
            open : true
        }
    }