Webpack深入与实战

      如果把项目开发的过程比作用积木搭房子的过程,Browserify:封装了各种各样的的小积木块,那怎么把这些积木块搭建成房子呢,这时需要用grunt或者gulp去把一个个task进行合并、检验、压缩,最后形成一所房子,这样的配置过程实在是太耗费时间、精力了。

     但是webpack的思想就不太一样,webpack直接就把用积木搭建的房子给予了项目开发者,它自身就包含了构建流程,假如搭建的房子并不理想或者想要稍稍修改一下,那么可以通过修改webpack的配置文件来解决,简单来说,webpack是一个基于对开发目的精准预测下的可配置系统。

    webpack引入资源的方式很简单,如图片、css文件,和common js规范引入其他js文件的方式相同,使用require指令,common js规范规定每个文件就是一个单独的模块,每个模块是一个单独的作用域。


Webpack深入与实战_第1张图片

moudle.exports=App;

require(‘App’);

并且webpack会智能地根据我们引入资源文件的大小来决定最终应该以什么样的方式来发布使用这个文件。

代码分割(code splitting):只去加载当前只需加载的文件,即按需加载

Loader:module可以通过loader去处理各种各样的文件,如JS文件(Common JS、AMD、ES6模块化方式),CSS文件、图片文件、JSON文件、自定义文件等等。

插件系统:模块热更新,对开发调试有效率

Webpack安装:

cd workspaces

Mkdir webpack-test

Cd webpack-test

Npm init

Npm install webpack --save-dev

Webpack打包css文件时会报错,因为它自身不带要css loader,所以要先下载

Npm install css-loader style-loader--save-dev

然后再指定style.css文件的加载器:require(‘style-loader!css-loader!./style.css’)

css-loader能够使得webpack处理css文件,style-loader能够将css-loader处理完的文件新建一个