【webpack4】第五部分 webpack的详细配置

【webpack4】第五部分 webpack的详细配置

---

---

6. webpack的详细配置

6.1 entry详细配置

        entry四种写法
            1. string -->  './src/js/index.js'
                单入口
                打包形成的是一个chunk，输出一个bundle文件，默认chunk的名字是main

            2. array  -->  ['./src/js/index.js','./src/js/add.js']
                多入口
                但是这种打包最终只会生成一个chunk，输出的也只有一个bundle文件
                这种写法只有一个用途就是去解决html热更新问题
            
            3. object  -->  {index:'./src/js/index.js',add:'./src/js/add.js'}
                多入口
                有几个入口文件就形成几个chunk，几个bundle

            4. 特殊用法
                enyrt:{
                    //所有的入口文件最终都只会生成一个chunk，输出只有一个bundle文件
                    index:['./src/js/index.js','./src/js/add.js']
                    //形成一个chunk，输出一个bundle文件
                    mul:'./src/js/mul.js'
                }
                其实就是第三种写法和第二种写法相结合
                这样写的好处：可以将多个相同类型的进行打包，不用类型的分开打包
                例如：
                entry:{
                    jquery:['jquery'],
                    react:['react','react-dom','react-router-dom']
                }

具体代码

const {resolve}  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:{
        index:'./src/js/index.js',
        add:'./src/js/add.js'
    },
    output:{
        filename:"js/[name].js",
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development'
}

6.2 output详细配置

const {resolve}  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:{
        index:'./src/js/index.js',
        add:'./src/js/add.js'
    },
    output:{
        //文件名称（指定名称+目录）
        filename:"js/[name].js",
        path:resolve(__dirname,'build'),
        // 所有资源引入公共的路径前缀 --> 'js/index.js' --> '/js/index.js'
        //一般用于生产环境
        publicPath:'/' ,
        //非入口chunk命名（除了entry下写的入口文件，其他的都是非入口文件）
        chunkFilename:'js/[name]_chunk.js',
        // 设置打包库暴露出内容的变量名
        library:'[name]_[contenthash]',
        // 将变量名添加打哪个上面
        libraryTarget:'browser' 
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development'
}

6.3 module 详细配置

const {resolve}  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:{
        index:'./src/js/index.js',
        add:'./src/js/add.js'
    },
    output:{
        //文件名称（指定名称+目录）
        filename:"js/[name].js",
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                //多个loader使用use
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //单个loader使用loader
                test:/\.js$/,
                loader:'eslint-loader',
                // 排除，不检查node_module
                exclude:/node_module/,
                //只检查 src
                include:resolve(__dirname,'src'),
                // 优先执行
                enforce:'pre',
                // enforce:'post' 延迟执行
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development'
}

6.4 resolve 详细配置

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

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/[name].js',
        path: resolve(dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin()], mode: 'development',

    // 解析模块的规则
    resolve: {
        // 配置解析模块路径别名: 优点:简写路径 缺点:路径没有提示
        alias: {
            $css: resolve(dirname, 'src/css')
        },
        // 配置省略文件路径的后缀名
        extensions: ['.js', '.json', '.jsx', '.css'],
        // 告诉 webpack 解析模块是去找哪个目录
        modules: [resolve(dirname, '../../node_modules'), 'node_modules']
    }
}

6.5 devServer 详细配置

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./scr/js/index.js',
    output:{
        filename:'js/[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['tyle-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./scr/index.html'
        })
    ],
    devServe:{
        // 运行代码的目录
        contentBase:resolve(__dirname,'build'),
        // 监视contentBase目录下的所有文件，一旦文件发生变化则reload（重新加载）
        watchContentBase:true,
        // 压缩
        compress:true,
        // 启动端口号
        prot:5000,
        //域名
        host:'localhost',
        // 自动打开浏览器
        open:true,
        // 开启HMR
        hot:true,
        // 不要启动服务器的日志信息
        clientLogLevel:'none',
        //除了一些基本的启动信息，其他内容都不显示
        quiet:true,
        //出错了不要全屏显示错误
        overlay:false,
        // 代理服务器（解决开发环境下的关于问题）
        //
        proxy:{
            // 一旦devServer（5000端口）接收到'/api'请求数据，则会把请求转发到另一个服务器上
            '/api':{
                target:'http://localhost:3000',
                // 路径重写，发送请求时将路径重写：以/api开头的去掉，因为另一台服务器不能识别'/api'
                pathRewrite:{
                    '^/api':''
                }
            }
        }

    }
}

6.6 optimization 详细配置

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./scr/js/index.js',
    output:{
        filename:'js/[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['tyle-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./scr/index.html'
        })
    ],
    optimization: { 
        splitChunks: {
            chunks: 'all'
        },
        // 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
        // 解决：修改 a 文件导致 b 文件的 contenthash 变化
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`
        },
        minimizer: [
            new TerserWebpackplugin({
                //开启缓存
                cache:true,
                //开启多进程打包
                parallel:true,
                // 启动source-map
                sourceMap:true
            })
        ]
    },
    mode:'production'
}

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！