今天开始学习webpack
这是当前比较热门的js应用程序的模块打包工具
它依赖于node.js和NPM
前端自动化工程主要解决以下问题:
js、css代码的合并和压缩
css预处理:less、sass、Stylus的编译
生成雪碧图(css sprite)
ES 6转ES 5
模块化
webpack打包后的代码已经不是你的代码,其中夹杂了更多webpack自身的模块处理代码
这部分内容最重要的是编译这个概念
各种格式的文件通过特定加载器编译后最终统一称为js,css,png等静态资源文件
在webpack中,一张图片,一个css,一个字体都称为模块,彼此存在依赖关系
举个例子,平时加载CSS大多通过<link>
标签引入css文件,而在webpack中,直接在一个.js文件中导入
比如:
import 'src/styles/index.css';
平时的话.js文件和.css应该是同一地位的,都是html文件的导入对象
上面的语句也可以写成
require(‘src/style/index.css’);
在打包的时候,index.css会被打包进一个js文件里面,通过动态创建<style>
的形式来加载css样式,在打包编译的时候把所有css都提取出来,生成一个css的文件
webpack的使用场景是单页面富应用(spa)
SPA通常是有一个html文件和一堆需要加载的js组成,它的html结构可能会非常简单
<head>
<link rel="stylesheet" href="dist/main.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/main.js"></scicpt>
</body>
只有一个div节点,所有的代码都集成在了main.js中
export和import
这两个是用来导入和导出模块的
一个模块就是一个js文件,它拥有独立的作用域,里面定义的变量外部是无法获取的
下面是将一个配置文件作为模块导出
导出使用export
//config.js
var Config = {
version:'1.0.0'
};
export {Config };
或者
//config.js
export var Config = {
version:'1.0.0'
};
//差不多就是定义了一个变量然后用export
然后使用import导入
//main.js
import {Config} from './config.js';
import {add} from './add.js';
console.log(Config); // {version:'1.0.0'}
console.log(add(1,1)); //2
以上的示例,导入的模块名称都是在export的文件中设置的,也就是说用户必须预先知道这个名称叫什么,比如Config、add,默认的模块可以使用export default来输出
示例代码如下:
//config.js
export default{
version: '1.0.0'
};
//add.js
export default function(a,b){
return a+b;
};