【Webpack初识--01】

何为 webpack 模块 

与 Node.js 模块相比，webpack 模块 能以各种方式表达它们的依赖关系。下面是一些示例：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• stylesheet url(...) 或者 HTML <img src=...> 文件中的图片链接。

 

 

 

webpack中关于require与import的区别

1、require常见使用场景：

var path = require('path')

var utils = require('./utils')

此时webpack会将path/utils/config三个文件打包进引用它的文件中

2、import常见于ES6语法中，也是一种模块引入语法，import会被转化为commonjs格式或者是AMD格式，webpack下babel默认会把ES6的模块转化为commonjs规范的

所以如下写法是等价的：

import utils from './utils';        //等价于     var utils = require('./utils');

不过这两种写法只需选一种，避免在代码中同时使用两种，否则会造成混淆。

3、总结：

最佳选择是往commonjs方向靠拢，想尝试ES6的话就用import代替commonjs同步语法即可。

因此，代码中保持以下两种风格就好：

//可打包在一起的同步代码，使用import语法
import list from './list';

//需要独立打包、异步加载的代码，使用require.ensure
require.ensure([], function(require){
    var list = require('./list');
});

4、关于var path = require('path')
var path = require('path')在webpack中经常看到，它的意思是指引入Node.js中的path模块。

path模块提供了一些用于处理文件路径的小工具，直接引用即可使用。