1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: "./src/index.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        // publicPath: 'https://cdn.example.com/assets/',
        // library: {
        //     name: 'MyLibrary', // 你在全局暴露的变量名
        //     type: 'umd',       // 对应旧的 libraryTarget: 'umd'
        // },
        // pathinfo: true,
        chunkFilename: "[id]-[hash].js", // 动态引入的会拆分chunk
        chunkLoadingGlobal: 'myWebpackJsonp',
        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
    },
    module: {
        rules: [ // 配置 Loader
            //  Webpack 拿着这个绝对路径，去 module.rules 数组里挨个匹配
            {
                test: /\.jsx?$/, // 正则匹配命中要使用 Loader 的文件
                include: [ // 只会命中这里面的文件
                    path.resolve(__dirname, 'app')
                ],
                exclude: [ // 忽略这里面的文件
                    path.resolve(__dirname, 'app/demo-files')
                ],
                use: [ // 使用那些 Loader，有先后次序，从后往前执行
                    'style-loader', // 直接使用 Loader 的名称
                    {
                        loader: 'css-loader',
                        options: { // 给 html-loader 传一些参数
                        }
                    }
                ]
            },
        ],
        noParse: [ // 不用解析和处理的模块 模块中引用的，是否匹配
            /special-library\.js$/  // 用正则匹配
        ],
    },
    resolve: { //拿到绝对路径
        // modules: [ // 没路径的，查按照这个数据去找这个文件
        //     'node_modules',
        //     path.resolve(__dirname, 'app')
        // ],
        // extensions: ['.js', '.json', '.jsx', '.css'], // 文件没用后缀，依次尝试
        alias: { // 别名配置，用于映射模块 
            '@': path.resolve(__dirname, "style"),

        },
        // alias: [ // alias 还支持使用数组来更详细的配置
        //     {
        //         name: 'module', // 老的模块
        //         alias: 'new-module', // 新的模块
        //         // 是否是只映射模块，如果是 true 只有 'module' 会被映射，如果是 false 'module/inner/path' 也会被映射
        //         onlyModule: true,
        //     }
        // ],
        symlinks: true, // 是否把外部软连接文件的这种当成自己内部文件 如果是当成内部，内部会约束，外部的也会受到相应的限制
        // descriptionFiles: ['package.json'], // 模块的描述文件
        // mainFields: ['main'], // 模块的描述文件里的描述入口的文件的字段名称
        // enforceExtension: false, // 是否强制导入语句必须要写明文件后缀
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
        }),
    ],

    devServer: { // DevServer 相关的配置
        proxy: { // 代理到后端服务接口
            '/api': 'http://localhost:3000'
        },
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000',
        //         changeOrigin: true, // 👈 必须加
        //         pathRewrite: { '^/api': '' }
        //     }
        // },
        contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服务器的文件根目录
        compress: true, // 是否开启 gzip 压缩
        historyApiFallback: true, // 是否开发 HTML5 History API 网页
        hot: true, // 是否开启模块热替换功能
        https: false, // 是否开启 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 构建的性能信息，用于分析什么原因导致构建性能不佳

    cache: false, // 是否启用缓存提升构建速度

    watch: true, // 是否开始
    watchOptions: { // 监听模式选项
        // 不监听的文件或文件夹，支持正则匹配。默认为空
        ignored: /node_modules/,
        // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
        // 默认为300ms 
        aggregateTimeout: 300,
        // 判断文件是否发生变化是不停的去询问系统指定文件有没有变化，默认每隔1000毫秒询问一次
        poll: 1000
    },
    // devtool: false, 
    devtool: 'source-map', // 配置 source-map 类型

    // context: __dirname, // Webpack 使用的根目录，string 类型必须是绝对路径

    // 配置输出代码的运行环境
    target: 'web', // 浏览器，默认
    // target: 'webworker', // WebWorker
    // target: 'node', // Node.js，使用 `require` 语句加载 Chunk 代码
    // target: 'async-node', // Node.js，异步加载 Chunk 代码
    // target: 'node-webkit', // nw.js
    // target: 'electron-main', // electron, 主线程
    // target: 'electron-renderer', // electron, 渲染线程
    stats: { // 控制台输出日志控制
        assets: true,
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
    },
}