Webpack——devServer详细配置

devServer详细配置

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
    // 模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',
    // 输出
    output: {
        // 文件名称（指定名称 + 目录）
        filename: 'built.js',
        // 输出文件目录（将来所有资源输出的公共目录）
        path: resolve(__dirname, 'build'),
        // 所有资源引入公共路径前缀--> 'imgs/a.jpg' --> '/imgs/a.jpg'
        publicPath: '/',
        // 非入口chunk的名称，就是代码分割生成的js名称
        chunkFilename: 'js/[name]_chunk.js',
        // 整个库向外暴露的变量名
        library: '[name]',
        // 将上面的变量名添加到指定对象上window、global、commonjs
        libraryTarget: 'window',
    },
    module: {
        // 需要使用的loader
        rules: []
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 告诉webpack哪些库不参与打包，并且使用名称也得变
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')
        }),
        // 将某个文件打包输出，并在html中引入该资源
        new AddAssetHtmlWebpackPlugin({
            // 指定要打包的文件路径
            filepath: resolve(__dirname, 'dll/jquery.js'),
            // 输出目录
            outputPath: 'dll',
            // html引入的路径
            publicPath: './dll',
            attributes: {
                nomodule: false,
            },
        }),
    ],
    // 解析模块的规则
    resolve: {
        // 配置解析模块路径别名
        alias: {
            $css: resolve(__dirname, 'src/css'),
        },
        // 配置省略文件路径的后缀名
        extensions: ['.js', '.json', '.css'],
        // 告诉 webpack 解析模块是去找哪个目录
        modules: [resolve(__dirname, '../../node_modules'), 'node_modules'],
    },
    // 开发服务器配置
    devServer: {
        // 服务器项目路径
        contentBase: resolve(__dirname, "build"),
        // 监视contentBase目录下的所有文件，一旦文件发生变化就reload
        watchContentBase: true,
        watchOptions: {
            // 忽略文件
            ignored: /node_modules/
        },
        // 启动gzip压缩
        compress: true,
        // 开发服务器端口号
        port: 3000,
        // 域名
        host: 'localhost',
        // 自动打开浏览器
        open: true,
        // 开启HMR功能
        hot: true,
        // 不显示启动服务器日志信息
        clientLogLevel: 'none',
        // 除了一些基本启动信息外，其他内容不要显示
        quiet: true,
        // 如果出错了，不要进行全屏提示
        overlay: false,
        // 服务器代理，解决开发环境下的跨域问题
        proxy: {
            // 一旦devServer（3000）服务器接收到/api/xxx的请求，就会把请求转发到另一个端口(3000)
            '/api': {
                target: 'http://localhost:5000',
                // 路径重写
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
    }
}