webpack 常用配置项

雨点打透心脏的1/2处 2023-05-30 10:51 21阅读 0赞

const path = require('path');
     moudule.exports = { 
        // entry 表示入口webpack 执行构建的第一步将从entry开始
        // 类型可以使 string object array
        entry: './src/entry', // 只有一个入口时
        entry: ['./src/entry', './src/entry2'], // 只有一个入口，有两个文件
        entry: {  // 两个入口
            a: './src/entry-a',
            b: ['./src/entry-b1', './src/entry-b2']
        },
        output: { 
            // 输出文件存放的目录必须是string 类型的绝对路劲
            path: path.resolve(__dirname, 'dist'),
            // 输出文件名称
            filename: 'bundle.js', // 完整的名称
            filename: '[name].js', // 在配置了多个entrys时，通过名称为不同的entry生成不同的文件名称
            filename: '[chunkhash].js', // 根据文件的内容的hash 值来生成文件的名称，用于文件长时间缓存文件
            //publicPath build 之后所有资源的URL 前缀， 为string 类型
            publicPath: '/assets/', 放到指定的目录下
            publicPath: '', 放到根的目录下
            publicPath: 'https://cdn.test.com/', //放到CDN上
            //导出的库名
            library: 'myLibrary', // 库名
            // 导出的库的类型, 为枚举类型，默认是var
            // 可以是 umd umd2 commonjs2 commonjs adm this var assign window glabal jsonp
            libraryTarget: 'umd',
            // 是否包含有用的文件路径信息到生成的代码里 
            pathinfo: 'true',
            //附加chunk 的文件名称
            chunkFileanme: '[id].js',
            chunkFileanme: '[chunkhash].js',
            // jsonp 异步加载资源时的回调函数名称， 需要和服务端搭配使用
            jonpFunctionL: 'myWebpackJsonp',
            //生成的sourceMap 文件名称
            sourceMapFileanme: '[file].map',
            // 浏览器开发者工具里显示的源码模块名称
            devtoolModuleFilenameTempalte: 'webpack:///[resource-path]',
            // 一步加载跨域资源的方式
            crossOriginLoading: 'use-credenttails',
            crossOriginLoading: 'anonymous',
            crossOriginLoading: false,
        },
        moudule: { 
            rules: [ // 配置loader
                { 
                    test: /\.jsx?$/, // 正则匹配要使用的loader 文件
                    include: [
                        path.resolve(__dirname, 'app')
                    ],
                    exclude: [ // 忽略这里边的文件
                        path.resolve(__dirname, 'app/demo-files')
                    ],
                    use: [
                        'style-loader',
                        { 
                            loader: 'css-loader',
                            options: {  // 向html-loader 传一些参数
                                
                            }
                        }
                    ]
                }
            ]
            
            
        },
        noParse: [
        /special-library\.js/ // 用正则匹配
        ],
        //配置插件
        plugins: [
            
        ],
        // 配置模块寻找规则
        resolve: { 
            
        },
        // 输出文件的性能检查配置
        performance: { 
            
        },
        devtool: 'source-map', // 配置source-map 类型
        externals: { 
            // 使用来自javasript 运行环境的提供的全局变量
            jquery: 'jQuery'
        },
        stats: { 
            // 控制台输出日志控制
        },
        devServer: { 
            // devServer 相关配置
        }
            
     }
     //未完待续