自己对webpack的理解 ----想到啥临时就再写进去

webpack是用来表示大项目系统拆分成功能不相关的几块功能性部分，他的专业名词叫做modules（部分，modules相对于整体项目是小的 serface area，可以做验证，调试，小测试，一个优秀的部分（modules）设计应该是连贯的并且在项目中有明确的目的）。,webpack通过import（ES2015规范）和require（Node CommonJs规范）将各部分连接（专业名词是bundle），表达出他们之间的关系（专业名词是dependencies），进而组成一个大的项目系统。

 

以我现在学习七天左右的学习收货总结下。

 

在sublime或者visual studio边写前端代码，边打包资源。

webpack.config.js文件里的入口就是自己写的js（webpack本身只认识js好像，后面通过loader把其他类型转化为js，图片转为为url），出口是就打包放在dist的具体目录。modules属性的test是字符串文件后缀，应该在某个不知道具体在哪地方的过程中加载特定文件后缀指定的代码，然后通过loader转化为js或者url（上面具体说了），同时可以指定放在dist目录的具体位置和文件名。

一般我用的loader目前是 css-loader style-loader html-loader expose-loader url-loader。

另个一个稍微重要的就是html-webpack-plugin 插件，new 一个他的对象，括号里面是template（自己html文件目录），filename（准备打包后放在dist的位置和文件名），title，inject（我试了下false和true生成的html代码都一样，不知道区别），hash，chunks（allow you to add only sone chunks，这个很重要，直接说出了那个界面和那个js有联系，因为js又说和那个css有联系），然后在dist对应位置生成了名字不同的html文件（专业称呼是“打包”）。

还有重要的是Hogan.js，他是一个编译器，有render方法，做渲染用的，因为方便，内容可以达到灵活。  hogan.compile(template).render(data) ，很简单，里面有{{ }}就是模板，<span class="text">{{username}}</span>，data一般是function（res）后端返回数据的res里具体json，最后就是$(xx).html(渲染结果)放在具体界面的具体标签位置上

（官网原理描述：Hogan has separate scanning, parsing and code generation phases. This way it's possible to add new features without touching the scanner at all, and many different code generation techniques can be tried without changing the parser）----》（意思是html代码事先编译，出成果，然后根据成果显示？hogan意思是{{}}部分不扫描编译（separete scanning），最后产生这部分代码（code genration）在插进去？，总之吧，不改变（解析或者叫做编译？）吧）

还有重要的是extract-text-webpack-plugin插件。官网实例用法：

module: {

    rules: [

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: "css-loader"

        })

      }

    ]

  },

  plugins: [

    new ExtractTextPlugin("styles.css"),

  ]

示例的官网解释：It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.

（它将输入块中所有必需的*.css模块移动到单独的css文件中。所以您的样式不再内联到JS包中，而是在一个单独的CSS文件（styles.css）中。如果总的样式表容量很大，那么会更快，因为CSS包是与JS包并行加载的。）

 

本文地址：https://blog.csdn.net/qq_34200501/article/details/85943905