webpack的devServer配置

开发服务器devServer自动化（自动编译、自动刷新、自动打开浏览器等等）
webpack打包demo，git地址：https://github.com/OnionMister/webpack-demo.git

1、目录结构

2、html，css，js

html、css、js文件内容对照这篇文章完成【webpack打包其他资源，即非js、html、css、jpg等资源，打包字体图表库】

3、安装webpack-dev-server

务必完成第二部

cnpm install webpack-dev-server -D

4、webpack.config.js内容

/**
 * 插件使用：下载----引入----使用
 * loader使用：下载----使用
 * 本配置以打包其他资源为基础，做热更新配置
 * 安装处理html的插件：cnpm install html-webpack-plugin -D
 * 安装处理css、其他资源的loader：cnpm install css-loader style-loader file-loader -D
 * 安装webpack和webpack-cli：cnpm insatll webpack webpack-cli -D
 * 安装启动devServer的指令：cnpm install webpack-dev-server -D
 */
// 引入处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 处理静态资源的resolve方法
const {
    resolve
} = require('path');
module.exports = {
    // 入口文件
    entry: './src/index.js',
    output: {
        // 打包后的文件名
        filename: 'bundle.js',
        // 输出路径，__dirname表示当前绝对路径，输出到当前绝对路径的dist下
        path: resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
                // 处理css
                test: /\.css$/, // 匹配css文件
                use: [
                    // 提取css字符串到创建好的style标签中，并插入的html的head中
                    'style-loader',
                    // 以commonjs规范的字符串打包css到输出的js文件中
                    'css-loader'
                ]
            },
            {
                // 处理其他文件
                exclude: /\.(css|less|sass|html|js|img|png|jpg)$/, // 排除文件，得到其他资源
                use: [{
                    loader: 'file-loader',
                    options: {
                        // [hash10]：10位hash数据，[ext]：文件原本扩展名
                        name: '[hash10].[ext]'
                    }
                }]

            }
        ]
    },
    plugins: [
        // HtmlWebpackPlugin默认创建一个空body的html
        // template配置会将指定目录的html的body的内容拷贝到创建的html的body下
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development', // 开发模式
    // mode:'production',  // 生产模式
    devServer: {
        // 开发服务器devServer自动化配置（自动编译、自动打开浏览器、自动刷新等等）
        // devServer相关配置：https://webpack.js.org/configuration/dev-server/
        // 只会在内存中编译打包，不会输出
        // 启动devServer的指令：npx webpack-dev-server
        contentBase: resolve(__dirname, 'dist'), // 要运行的目录，构建后的目录
        // 启动gzip压缩，提升速度
        compress: true,
        // 指定端口号3030
        port: 3030,
        // 自动打开浏览器
        open: true
    }
}

5、打包完成后运行启动服务命令

打包

webpack

启动服务

npx webpack-dev-server

打包完的结构

等待自动打开浏览器窗口

6、测试是否热更新

修改js、css、html，会发现页面会自动更新，但是打包的bundle.js并不会有新的内容，这说明npx webpack-dev-server不会输出真实的打包内容，只会再内存中编译打包，一旦终止服务，就相当于什么也没发生。