webpack常用的配置中的一些属性

entry

参数类型

1、字符串

单入口文件

打包形成一个chunk。输出一个bundle文件 此时chunk的名称默认是main

entry:'./index.js'

2、Array

多入口

所有入口文件最终只会形成一个chunk，但输出出去只有一个bundle文件

只有在hmr功能中让html热更新生效~

entry:['./index.js','./main.js']

3、Object

多人口 有几个入口文件就形成几个chunk，输出也有几个bundle文件

此时chunk的名称是key

entry:{
    index:'./index.js',
    main:'./main.js'
}

特殊用法

entry:{
    index:['./index.js','./index1.js'], // 会将这个两个js文件打包成一个chunk
    main:'./main.js',
    react:['react','react-dom','react-router-dom']
}

output

filename(指定名称+目录)

filename:'js/[name].js'

path(输出文件的目录，将来所有资源输出的公共目录)

const {resolve} = require('path') path:resolve(__dirname,'build')

publicPath(所有资源的引入公共路径的前缀)

imgs/a.jpg --> /imgs/a.jpg

publicPath:"/"

chunkFilename

chunkFilename:'[name]_chunk.js' 非入口chunk的名称

非入口chunk 怎么引入 import('./add').then(()=>{})

如果不设置chunkFilename名字是[name].js name==id 比如 0.js

library

如果想把bundle.js的内容暴露出去给外面使用可以使用

一般是暴露一个库去使用 一般和dll结合使用

entry:{
    main:'./index.js'
},
library:'[name]'

index.js

export function add(){
    console.log('my is add')
}

index.html

main.add(); // my is add

libraryTarget

library暴露出的变量名添加到那个属性上

libraryTarget:'window' // brower
libraryTarget:'global' // node
libraryTarget:'commonjs' // exports.main = ''
libraryTarget:'amd' 

moudle

rules

module:{
    rules:[
        {
            test:/\.js$/,
            // 排除node_modules下的文件
            exclude:/node_modules/,
            // 只检查src下的js文件
            include: resolve(__dirname,'src'),
            // 单个loader用loader
            loader:'eslint-loader',
            // 优先执行
            enforce:"pre",
            // 延后执行  enforce:"post", 默认中间执行
            // use:['',''] 使用多个loader
        },
        {
            // 以下配置只会生效一个
            oneOf:[]
        }
    ]
}

resolve

entry:'',
// 解析模块的规则
resolve:{
    // 配置路径别名
    alias:{
        $css:resolve(__dirname,'src/css')
    },
    // 配置省略文件路径的后缀名
    // import "$css/index"
    extensions:['.js','.json','css','jsx'],
    // 告诉webpack解析模块的时候要去那个目录找
    modules:[resolve(__dirname,'../../node_modules'),'node_modules' ]
}

import "../css/index.css"
// 如果配置上上面的路径别名
import "$css/index.css"

devServer

devServer:{
    // 项目构建后路径
    contentBase:resolve(__dirname,'build')
    // 监视contentBase 目录下所有的文件 一旦文件变化就会reload
    watchContentBase:true,
    watchOptions:{
        // 忽略文件
        ignored:/node_modules/
    },
    // 启动gzip压缩
    compress:true,
    // 端口号
    port:3000,
    // 自动打开浏览器
    open:true,
    // 域名
    host:'localhost'
    // 开启hmr
    hot:true
    // 不要显示启动服务器日志信息
    clientLogLevel:"none"
    // 除了一些基本启动信息以外，其他内容都不会显示
    quiet:true
    // 如果出错了 ， 不要全屏提示~
    overlay:false,
    // 服务器代理--》解决开发环境跨域问题
    proxy:{
        // 一旦devServer（5000）服务器受到/api/xxx的请求，就会把请求转发到另外一个服务器（3000）
        '/api':{
            target:"http://localhost:3000",
            // 发送请求时，请求路径重写：将/api/xxx --> /xxx
           pathRewrite:{
                '^/api':''
            }
        }
        
    }
}

optimization分割代码

optimization:{
    splitChunks:{
       chunks:'all',
       // 默认值
       minSize:30 * 1024, // 分割的chunk最小为30kb,
       maxSize:0, // 表示最大没有限制
       minChunks:1, // 要提取的chunks最少被引用1次
       maxAsyncRequests:5, // 按需加载时并行加载的文件的最大数量
       maxInitalRequsets:3, // 入口js文件最大并行3个请求数量
       automaticNameDelimiter:'~', // 名称连接符
       name:true, // 可以使用内部命名规则
       cacheGroups:{
           // 分割chunk的组
           vendors:{
               // node_modules文件会被打包到vendors组的chunk中 --> vendors~xxx.js
               // 满足上面的公共规则
               test:/[\\/]node_modules[\\/]/,
               // 优先级
               priority:-10,
               default:{
                   // 要提取的chunk最少被引用2次
                   minChunks:2
                   // 优先级
                   priority: -20,
                   // 如果当前打包的模块，之前已经被提取的模块是同一个，就会复用
                   reuseExistingChunk: true
                   
               }
           }
       }
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件runtime
    // 解决：修改某一文件导致该文件在其他文件中引用的contenthash发生变化导致多出contenthash发送变化
    runtimeChunk:{
        name:entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer:[
        // 配置生产环境的压缩方案
        // 引入 const TWP = require('terser-webpack-plugin')
        new TWP({
            // 开启缓存
            cache:true,
            // 开启多进程打包
            parallel:true,
            // 启用source-map
            sourceMap:true
        })
    ]
}