webpck从零开始(一)----入门基础

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

webpck从零开始(一)----入门基础

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

简约打包实现原理:webpack使用前,先进行一个配置,会从一个入口文件进入,根据模块的依赖关系进行静态分析,这些文件(模块)会被包含到bundle.js文件中。webpack会给每个模块分配一个唯一的ID并通过这个ID索引和访问模块,在页面启动时,会先执行 入口文件 中的代码,其它模块会在运行 require 的时候再执行。

一、LOADER的运用分析

webpack本身只能处理JavaScript模块,如果要处理其它类型的文件,那就要借助于loader。所以如果我们需要在应用中添加css文件,就需要使用到css-loader和style-loader,他们做俩件不同的事,css-loader会遍历css文件,找到url表达式处理他们,style-loader会将原来的css代码插入到页面中的一个style标签中。姑且require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!

二、配置文件

webpck从零开始(一)----入门基础

参考资料:http://www.runoob.com/w3cnote/webpack-tutorial.html