• 前端构建工具 webpack


    一.自我初级认知  (是什么?     能干什么,有卵用?       有选择为什么要选你?(比较优势在哪) )     适合的才是最好的

          模块打包器(module bundler)     根据项目需求合并代码,并且支持按需加载。

      1.将混在页面中的图片文件、js文件、css文件抽取出来,解除依赖。

      2.模块系统主要解决模块的定义、依赖和导出.

          3.全局作用域下,也就是定义在 window 对象中。

          4.webpack实现的功能:

        a:将依赖树拆分成按需加载的块

        b:初始化加载的耗时尽量少

        c:各种静态资源都可以视作模块

        d:将第三方库整合成模块的能力

        e:可以自定义打包逻辑的能力

        f:适合大项目,无论是单页还是多页的 Web 应用

      5.编译后缓存到内存中去。

      6.webpack的理念是基于项目处理的,把对应的文件格式给对应的loader处理,然后你就不用管了,它会决定怎么压缩,编译。  

             配置文件:用规定的语法描述你要干什么!  怎么干是工具的事!    就像给方法传递参数一样。

    二:webpack配置

          1.entry:配置要打包的文件的入口;可以配置多个入口文件

          2.output:配置输出文件的路径,文件名。  出口

      3.resolve:配置文件后缀名        

      4.module(loaders): 配置要使用的loader(注意loaders的处理顺序是从右到左的)     编译过程中加载的资源拦截做处理

      5.plugins: 配置要使用的插件

          配置目录结构和详解:  网上看别人的,github!    http://www.imooc.com/article/4617

      

      

          

    三:学习参考资源

         http://www.jirengu.com/app/watch/1433/1?vsum=2(入门视频哦!相当的详细)

          0.https://zhuanlan.zhihu.com/p/24888828?refer=study-fe(饥人谷不错的博客哦)

      1.http://www.jianshu.com/p/b95bbcfc590d     http://www.cnblogs.com/zhengjialux/p/5861845.html (基础教程)

      2.http://webpackdoc.com/module-system.html(官方中文文档:简单易懂,相当不错)

          3.https://webpack.js.org/concepts/(官网,非常的不错哦! 练习英文阅读能力

             http://webpack.github.io/docs/list-of-plugins.html(同上哦

             http://survivejs.com/webpack/webpack-compared(构建工具比较文档

          4.https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine(知乎)

      5.http://www.open-open.com/lib/view/open1471590235833.html(项目发布必看

          6.http://www.cnblogs.com/liuyt/p/5810042.html(css autoprefixer!)

             http://blog.csdn.net/github_26672553/article/details/52107165

          7.http://www.cnblogs.com/tugenhua0707/p/4793265.html(有实例demo哦,不错

          8.https://segmentfault.com/a/1190000002551952(入门必看哦! 这个相当的nice

    四:遇到的坎儿

          1.人必须首先学会靠自己!不能指望别人! 成年人了!

          2. webpack无法生成目录和文件? 

              答:命令的问题; webpack才是编译处理哦!  webpack-dev-server处理后编译的结果在内存中。

      3.读人家的webpack配置文件哦! 不懂得查资料学习!
      4.看报错信息 认真的看!

         

    其他同类工具:

    1.gulp  grunt

    2.http://fis.baidu.com/fis3/docs/beginning/release.html#/docs/beginning/release.html#CssSprite%E5%9B%BE%E7%89%87%E5%90%88%E5%B9%B6  (百度的哦 文档是中文的)

    疑惑:

    1.自动化构建工具、模块规范、模块化管理工具 ? 

       答:会用 Less 去写 CSS,会用 Jade 去写 HTML,会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等等。所有的一切,如果用手动来做,简直要疯              了!而自动化构建工具,就是为我们完成这一套重复而机械的工作的

              https://www.zhihu.com/question/35595198/answer/67223812

              https://segmentfault.com/q/1010000004217785/a-1020000004217853

    2.npm?   npm仓库?   

    3.镜像?  

    4.语法糖: duck type,人本接口,最小接口,约定优于配置,广义来讲都是一些思想上的"语法糖"。

                    增加程序的可读性,从而减少程序代码出错的机会。

  • 相关阅读:
    QT UAC问题汇总贴
    被动的流氓
    Web前端优化需要注意的点
    VS快捷键
    延时过程中要加上app.processEvents(),进度条里也要加上这句
    Nim语言:Pascal的语法,Python的缩进
    QString转换成LPCWSTR
    Pascal编译器大全(非常难得)
    WCF学习心得----(三)服务承载
    SafeSEH原理及绕过技术浅析
  • 原文地址:https://www.cnblogs.com/njqa/p/6115399.html
Copyright © 2020-2023  润新知