深入浅出webpack学习(10)--整体结构配置

webpack的整体配置结构

之前说过每个配置项的具体含义，但是没有描述他们所处的位置和数据结构，下面统一描述下：

const path = require('path')

module.exports = {
    //entry表示入口， webpack执行构建的第一步将从entry开始，可抽象成输入。
    //类型可以是string | object | array
    entry: './app/entry', //只有1个入口，入口只有一个文件
    entry: ['./app/entry1', './app/entry2'], //只有一个入口，入口有两个文件
    entry: {    //有2个入口
        a: './app/entry-a',
        b: ['./app/entry-b1', './app/entry-b2']
    }，
    
    //如何输出结果： 在webpack经过一系列处理后，如何输出最终想要的代码。
    output: {
        //输出文件存放的目录， 必须是string类型的绝对路径
        path: path.join(__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 | commonjs2 | commonjs | amd | this | var。。。
        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: {
        //配置loader
        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: { //loader传递参数
                            
                        }
                    }
                ]
            }
        ],
        noParese: [ //不用解析和处理的模块
            /special-library\.js$/  // 用正则匹配
        ]
    },
    
    //配置插件
    plugins: [],
    
    //配置寻找模块的规则
    resolve: {
        modules: [ //寻找模块的根目录，array类型，默认以node_modules为根目录
            'node_modules',
            path.resolve(__diranme, '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: 'modules' //老的模块
                alias: 'new-module', //新的模块
                //是否是只映射模块，如果是true只有'module'会被映射，如果是 false 'module/inner/path' 也会被映射
                onlyModule: true
            }
        ]，
        symlinks: true, //是否跟随文件软链接去搜寻模块的路径
        descriptionFile: ['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
  },
}