webpack 配置devServer 服务器

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
    }
}