webpack 部署以及分离第三方库

在上线的时候和调试时候的区别不是很大,只需要修改下一些配置文件和一些优化处理。

  • 处理webpack.deploy.config.js

    • 首先将webpack.develop.config.js中的文件拷贝过来
    • 头部引入webpack const webpack=require("webpack")
    • 修改module.exports对象上的entry为:

       {
           app:path.resolve(__dirname,'src/js/app.js'), 
           vendors:['react','react-dom'] // 此处是第三方包
       }
      
    • 修改module.exports 中的output为:

       {
          path:path.resolve(__dirname,'deploy/js'),
          filename: 'bundle.js'
       }
      
    • 在module.exports对象上添加一个新的属性plugins,值为:

       new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js' )
      
  • 最后在package.json文件中的scripts添加一项:

      'deploy':'webpack --config webpack.deploy.config -p'

    -p 可能是 production的意思(猜测) 添加此参数可进行压缩,混淆代码。

  • 最终cli运行:

    $ npm run deploy

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值