webpack一些方法应用

• Entry

webpack在寻找相对文件是会以context为根目录,context默认为执行启动webpack时所在的工作目录,entry的路径及其依赖的模块采用相对于context的路径来描述

// 改变context默认配置
module.exports = {
    context:path.resolve(__dirname,'src'),
    // entry配置
    // 字符串
    entry:"./src"
    // 数组
    entry:["xx1","xx2"]
    // 对象: 配置多个入口,每个入口生成chunk
    entry:{
        a:"./app/entry-a",
        b:"./app/entry-b"
    }
    // 配置动态entry
    // 同步
    entry:()=>{
        return {
            a:"./pages/a",
            b:"./pages/b"
        }
    }
    // 异步
    entry:()=>{
        return new Promise((resolve,reject)=>{
            resolve({
                'a':"./pages/a",
                "b":"./pages/b"
            })
        })
    }
}

• output

module.exports={
    output:{
        fileName:"[name].js",
    }
}

• resolve

配置别名

module.exports={
    resolve:{
        alias:{
            components:"src/components"
        },
        // 用于配置后缀列表
        extensions:[".js",".vue",".json"],
        // 用于配置模块查找路径
        modules:["node_modules","src"]
    }
}

• devserver

module.exports={
    devServer:{
        hot:true, // 配置热更新,更改代码不刷新
        inline:true, // 配置实时刷新
        historyApiFallback:true, // 配置history模式
        headers:{}, // 注入响应头
        host:"0.0.0.0", //配置主机
        port:8080, //端口
        allowedHost:[], //配置白名单
        // https:true, // 启用https
        // 自己的证书配置
        https:{
            key:fs.readFileSync('xxx.key'),
            cert:fs.readFileSync('xxx.crt'),
            ca:fs.readFileSync('xxx.pem')
        },
        clientLogLevel:"info", // 配置日志级别
        compress:true, // 启用gzip压缩
        open:true // 自动打开浏览器
    }
}

• target

module.exports = {
    target:"node"
}

• devtool

module.exports = {
    // 开发环境推荐使用source-map,方便调试
    devtool:"source-map"
}

• watch

module.exports = {
    // 开启监听模式
    watch:true,
    watchOptions:{
        // 不需要监听的文件
        ignored:/node_modules/,
        // 监听到变化后等300ms再执行
        aggregateTimeout:300,
        // 轮询文件是否变化
        poll:1000
    }
}

• externals

module.exports = {
    // 告诉webpack哪些库不参与打包
    externals:{}
}

• resolveLoader

module.exports = {
    resolveLoader:{
        // 去哪个目录下查找loader
        modules:['node_modules','./loaders']
        // 入口文件后缀
        extensions:['.js','.json','.ts'],
        // 指明入口文件位置的字段
        mainFields:['main']
    }
}