webpack-config.js

const path = require('path');
module.exports = {
    // entry 表示入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入
    // 类型可以是 string、object、array
    entry: './app/entry', // 只有 1 个入口，入口只有 1 个文件
    entry: ['./app/entry1', './app/entry2'], // 只有 1 个入口，入口有两个文件
    entry: { // 有两个入口
        a: './app/entry-a',
        b: ['./app/entry-b1', './app/entry-b2']
    },
    // 如何输出结果：在 webpack 经过一系列处理后，如何输出最终想要的代码
    output: {
        // 输出文件存放的目录，必须是 string 类型的绝对路径
        path: path.resolve(__dirname, 'dist'),
        // 输出文件的名称
        filename: 'bundle.js', // 完整的名称
        filename: '[name].js', // 在配置了多个 entry 时，通过名称模板为不同的 entry 生成不同的文件名称
        filename: '[chunkhash].js', // 根据文件内容的 hash 值生成文件的名称，用于浏览器长期缓存文件
        // 发布到线上的所有资源的 URL 前缀，为 string 类型
        publicPath: '/assets/', // 放到指定目录下
        publicPath: '', // 放到根目录下
        publicPath: 'https://cdn.example.com', // 放到 CDN 上
        // 导出库的名称，为 string 类型
        // 不填它时，默认的输出格式是匿名的立即执行函数
        library: 'MyLibrary',
        // 导出库的类型，为枚举类型，默认是 var
        // 可以是 umd、umd2、commonjs、commonjs2、amd、this、var、assign、window、global、jsonp
        libraryTarget: 'umd',
        // 是否包含有用的文件路径信息到生成的代码里，为 boolean 类型
        pathinfo: true,
        // 附加 Chunk 的文件名称
        chunkFilename: '[id].js',
        chunkFilename: '[chunkhash].js',
        // JSONP 异步加载资源时的回调函数名称，需要和服务端搭配使用
        jsonpFunction: 'myWebpackJsonp',
        // 生成的 Source Map 文件的名称
        sourceMapFilename: '[file].map',
        // 浏览器开发工具里显示的源码模块名称
        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
        // 异步加载跨域的资源时使用的方式
        crossOriginLoading: 'use-credentials',
        crossOriginLoading: 'anonymous',
        crossOriginLoading: false
    },
    // 配置模块相关
    module: {
        rules: [ // 配置 Loader
            {
                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$/ // 用正则匹配
        ]
    },
    // 配置插件
    plugins: [],
    // 配置寻找模块的规则
    resolve: {
        modules: [ // 寻找模块的根目录，为 array 类型，默认以 node_modules 为跟目录
            'node_modules',
            path.resolve(__dirname, 'app')
        ],
        extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
        alias: { // 模块别名配置，用于映射模块
            // 将 'module' 映射成 'new-module'，同样，'module/path/file' 也会映射成 'new-module/path/file'
            'module': 'new-module',
            // 使用结尾符号$后，将 'only-module' 映射成 'new-module',
            // 但不像上面的，'module/path/file' 不会映射成 'new-module/path/file'
            'only-module$': 'new-module'
        },
        alias: [ // alias 还支持使用数组来更详细地进行配置
            {
                name: 'module', // 老模块
                alias: 'new-module', // 新模块
                // 是否只映射模块，如果是 true ，则只有 'module' 会被映射；如果是 false ，则 'module/inner/path' 也会被映射
                onlyModule: true
            }
        ],
        symlinks: true, // 是否根随文件的软链接去搜寻模块的路径
        descriptionFiles: ['package.json'], // 模块的描述文件
        mainFields: ['main'], // 模块的描述文件里描述入口的文件的字段名
        enforceExtension: false, // 是否强制导入语句写明文件
    },
    // 输出文件的性能检查配置
    performance: {
        hints: 'warning', // 有性能问题时输出警告
        hints: 'error', // 有性能问题时输出错误
        hints: false, // 关闭性能检查
        maxAssetSize: 200000, // 最大文件的大小（单位为 bytes）
        maxEntryPointSize: 400000, // 最大入口文件的大小（单位为 bytes）
        assetFilter: function(assetFilename) { // 过滤要检查的文件
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    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，渲染线程
    externals: { // 使用来自 JavaScript 运行环境提供的全局变量
        jquery: 'jQuery'
    },
    stats: { // 控制台输出日志控制
        assets: true,
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true
    },
    devServer: { // DevServer 相关的配置
        proxy: { // 代理到后端服务接口
            '/api': 'http://localhost:3000'
        },
        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
        }
    },
}