基本配置详解

一、entry

1、string：'./src/index.js'

单入口

打包形成一个chunk。输出一个bundle文件

默认名为main

2、array：['./src/index.js','./src/**.js']

多入口

打包形成一个chunk，输出一个bundle文件

3、object

多入口

entry:{
    index:'./src/index.js'
    add:'./src/add.js'
}

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

此时chunk得名称是key

4、特殊用法

entry:{
    //所有得入口最终会形成一个chunk，输出一个bundle文件
    index:['./src/index.js','./src/count.js']
    //形成一个chunk，输出一个bundle文件
    add:'./src/add.js'
}

二、output

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry:'./src/index.js',
    output:{
        //指定文件名称及目录
        filename:'./js/[name].[cententhash:10].js'，
        //输出文件得目录（所有资源）
        path:resolve(__dirname,'build'),
        //所有资源引入公共路径前缀
        publicPath:'/'，
        //非入口chunk得名称
        chunkFilename:'js/[name]_chunk.js',
        //整个库向外暴露得变量名
        library:'[name]'
        //变量名添加到那个上
        libraryTarget:'window'
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development'
}

三、module

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry:'./src/index.js',
    output:{
        filename:'./js/[name].[cententhash:10].js'，
        path:resolve(__dirname,'build'),
    },
    module:{
        rules:[
            //loader配置
            {
                test:/\.css$/,
                //多个loader用use
                use:['style-loader','css-loader']
            },
            {
                test:/\.js$/
                //单个loader用loader
                loader:'eslint-loader'，
                //排除node-module下得js文件
                exclude:/node-modules/，
                //只检查src下面得js文件
                include:resolve(__dirname,'src')，
                //优先执行   'post',延后执行
                enforce:'pre',
                //指定loader得配置
                options:{
                
                }
            },
            {
                //以下配置只会生效一个
                oneOf:[]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development'
}

四、resolve

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry:'./src/index.js',
    output:{
        filename:'./js/[name].[cententhash:10].js',
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development',
    //解析模块得规则
    resolve:{
        //配置解析模块路径别名,优点：简写路径，缺点：路径没有提示
        alias:{
            $css:resolve(__dirname,'src/css')
        }，
        //配置省略文件路径得后缀名
        extensions:['.js','json'],
        //告诉webpack解析模块是去那个目录找
        modules:[resolve(__dirname,'../../node_modules'),'node_modules']
    }
}

五、devServer

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry:'./src/index.js',
    output:{
        filename:'./js/[name].[cententhash:10].js',
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development',
    devServer:{
        //运行代码得目录
        contentBase：resolve(__dirname,'build'),
        //监视 contentBase 目录下得所有文件，一旦文件发生变化就会重新打包
        watchContentBase:true,
        //
        watchOptions:{
            //忽略文件
            ignored:/node-modules/
        },
        //启动gzip压缩
        compress:true,
        //端口号
        port：3000,
        //域名
        host:'localhost',
        //自动打开浏览器
        open：true,
        //开启HMR功能
        hot：true,
        //不要显示启动服务日志
        clientLogLevel:'none',
        //除了一些基本启动信息意外，其他内容都不要显示
        quiet:true，
        //如果出错，不要全屏提示
        overlay:false,
        //服务器代理，解决开发环境跨域问题
        proxy:{
            //一旦devServer(3000)服务器接收到 /api/xxx 得请求，就会把请求转发得另一个服务器上(3000)
            './api':{
                target:'http://localhost:5000'，
                //发送请求时，请求路径重新：将 /api/xxx   ---> /xxx  (去掉/api)
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

六、optimization

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
    entry:'./src/index.js',
    output:{
        filename:'./js/[name].[cententhash:10].js',
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'production',
    optimization:{
        splitChunks:{
            chunks:'all'
        },
        //将当前模块记录其他模块得hash单独打包为一个文件 runtime
        //解决：修改a文件导致b文件得contenthash变化
        runtimeChunk:{
            name:entrypoint => `runtime-${entrypoint.name}`
        },
        minimizer:[
        //配置生产环境得压缩方案：js和css
            new TerserWebpackPlugin({
                //开启缓存
                cache:true,
                //开启多进程打包
                parallel:true,
                //启动source-map
                sourceMap:true
            })
        ]
    }
}