webpack4.0配置记录(2)

栏目: JavaScript · 发布时间: 5年前

内容简介:通过exclude排除和include包含某些模块另外也可以使用webpack自带的ignorePlugin插件排除某些包,减少体积。以上配置忽略了时间格式化moment.js中的语言包
new Webpack.DefinePlugin({//用来定义全局环境变量
    DEV:JSON.stringify('dev'),
    FLAG:'true'
}),

webpack简单优化

  1. noParse

    module:{
        noParse:'/jquery/',//不去解析设置的包所依赖的关系,如jquery
    }
    
  2. ignorePlugin

    module:{
        noParse:'/jquery/',//不去解析设置的包所依赖的关系
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                include:path.resolve('src'),
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    }
    

通过exclude排除和include包含某些模块

另外也可以使用webpack自带的ignorePlugin插件排除某些包,减少体积。

new webpack.IgnorePlugin(/\.\/locale/,/moment/),

以上配置忽略了时间格式化moment.js中的语言包

  1. happypack多线程打包

    let Happypack=require('happypack')
    ...
    module.exports={
        module:{
            noParse:'/jquery/',//不去解析设置的包所依赖的关系
            rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    include:path.resolve('src'),
                    use:'Happypack/loader?id=js'
                    // use:{
                    //     loader:'babel-loader',
                    //     options:{
                    //         presets:[
                    //             '@babel/preset-env',
                    //             '@babel/preset-react'
                    //         ]
                    //     }
                    // }
                }
            ]
        },
        plugins:[
            new Happypack({
                id:'js',
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env',
                                '@babel/preset-react'
                            ]
                        }
                    }
                ]
            })
        ]
    }
    
  2. webpack内置功能

    (1)tree-shaking

    (2)scope-hosting

    这两项优化只在生产环境下有效

  3. 抽离公共代码
module.exports={
    optimization:{
        splitChunks:{//分割代码块
            cacheGroups:{//缓冲组
                common:{
                    chunks:'initial',
                    minSize:0,//抽离模块最小粒度是0
                    minChunks:2//表示代码块用过2次以上就要抽离
                },
                vendor:{
                    priority:1,//相当于权重,先抽离第三方模块,如果不设置该属性,分割代码块将从上到下,无法抽离第三方模块。
                    test:/node_modules/,
                    chunks:'initial',
                    minSize:0,//抽离模块最小是0
                    minChunks:2//表示用过2次以上就要抽离
                }
            }
        }
    },
}
  1. 文件热更新
devServer:{
    hot:true
},
plugins:[
    new webpack.NamedModulesPlugin(),//打印更新的模块路径
    new webpack.HotModuleReplacementPlugin()//热更新
]

7.可以使用dllPlugin动态链接库优化

DllPlugin 和 DllReferencePlugin提供了以大幅度提高构建时间性能的方式拆分软件包的方法。原理是将特定的第三方NPM包模块提前构建,然后通过页面引入。这不仅能够使得vendor文件可以大幅度减小,同时,也极大的提高了构件速度。网上别的大神有一篇文章写的很详细,可以参考, 传送门

以上就是一些自己在学习webpack4.0配置过程中的一些学习记录,写出来和大家分享,如果有错误,还望告知。欢迎关注交流!不要忘了点个赞,谢谢!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

为什么中国没出Facebook

为什么中国没出Facebook

谢文 / 凤凰出版社 / 2011-7-1 / 39.80元

《为什么中国没出Facebook》对互联网的游戏规则、市场、格局、模式及发展趋势等多方面进行了阐述,既勾画出了理想中的互联网生态及其本质,又联系中国实际,探讨了中国互联网行业的未来发展。《为什么中国没出Facebook》提出了在互联网成事应该符合的8条原则,比较了Facebook、MySpace、Twitter三种创新模式,指出了Web2.0平台时代新浪、腾讯、百度、搜狐等互联网巨头的未来方向,也......一起来看看 《为什么中国没出Facebook》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具