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'] // 此处是第三方包 }

    1
    2
    3
    4
    5
     {
    app:path.resolve(__dirname,'src/js/app.js'),
    vendors:['react','react-dom'] // 此处是第三方包
    }
    

  • 修改module.exports 中的output为：

    复制代码 { path:path.resolve(__dirname,'deploy/js'), filename: 'bundle.js' }

    1
    2
    3
    4
    5
     {
    path:path.resolve(__dirname,'deploy/js'),
    filename: 'bundle.js'
    }
    

  • 在module.exports对象上添加一个新的属性plugins，值为：

    复制代码 new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js' )

    1
    2
     new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js' )
    

• 最后在package.json文件中的scripts添加一项：

  复制代码'deploy':'webpack --config webpack.deploy.config -p'

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

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

• 最终cli运行:

  $ npm run deploy

最后

以上就是强健期待最近收集整理的关于webpack 部署以及分离第三方库的全部内容，更多相关webpack内容请搜索靠谱客的其他文章。