webpack|webpack实习学习总结

代码分割 打包就是将各个模块(一个个import\require的js文件)引入并合并到一个单独的js文件的过程,最终形成一个“bundle”,接着在html页面上引入这个"bundle"。

  • webpack带来的好处:
1:模块化开发:
提高开发效率,增加代码的维护性和可读性(因为复杂的应用都有比较复杂的资源关系网,模块化开发有助于我们清晰地各个资源之间的关系,从而组合式地引入各个模块)
2:优化:
(1)可以进行模块复用(抽取公共代码,减少不必要的http请求;防止js文件过大阻塞关键dom的加载)
  • (2) 异步加载:按需加载
  • (3)消除对未引用资源的依赖
    (4) 可以控制资源的处理方式:针对js、css、图片、html等进行我们希望的操作,比如uglify压缩代码、url-loader压缩图片
    (5) 稳定的生产部署:开发和生产环境分别配置不同的webpack配置,针对于每个项目都可以有自己特有的一套开发和上线流程,通过同一“套”(不是同一个配置文件)流程稳定地导出
    (6) 可以提高效率的一系列配套开发工具:devServer、HMR、watch…这些工具开箱即用,很大地提高我们的开发效率
【webpack|webpack实习学习总结】代码分割是为了解决打包带来的副作用,打包后文件体积过大。

    推荐阅读