webpack的打包发布

1.为什么要打包发布?

项目开发完成后,使用webpack对项目进行打包发布的主要原因有以下两点:

  1. 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件

  2. 开发环境下,打包生成的文件不会进行代码压缩和性能优化

2.配置webpack的打包发布

在package.json文件的scripts节点下,新增build命令如下:

"scripts":{
  "dev":"webpack serve",//开发环境中,运行dev命令
  "build":"webpack --mode production"//项目发布时,运行build命令
  }
 

—mode是一个参数项,用来指定webpack的运行模式。production代表生产环境,会对打包生成的文件进行代码压缩和性能优化。

注意:通过—mode指定的参数项,会覆盖webpack.config.js中的mode选项。

3.把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中,进行如下的配置:

 output: {
        path: path.join(__dirname, './fix'), //输出文件的存放路径
        //明确告诉webpack把生成的bundle.js文件存放到fix目录下的js子目录中
        filename: 'js/fire.js' //输出文件的名称

    },

4.把图片文件统一生成到image目录中

修改webpack.config.js中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

{
                test: /\.jpg|png|gif$/, //匹配图片文件
                use: {
                    loader: 'url-loader', //通过loader属性指定要调用的loader
                    options: { //通过options属性指定参数项
                        limit: 87978,
                        //明确指定把打包生成的图片文件,存储到dist目录下的image文件夹中
                        outputPath: 'image'
                    }

                }

            },

5.自动清理fix目录中的旧文件,可以安装并配置clean-webpack-plugin插件:

//1.安装清理fix目录中的webpack插件
npm install clean-webpack-plugin@3.0.0 -D

//2.按需导入插件、得到插件的构造函数之后,创建插件的实例对象
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//3.把创建的cleanPlugin 插件实例对象,挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件

6.企业级项目的打包发布

主要流程如下:

  • 生成打包报告,根据报告分析具体的优化方案

  • Tree-Shaking

  • 为第三方库启用CDN加载

  • 配置组件的按需加载

  • 开启路由懒加载

  • 自定制首页内容

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值