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模塊提供了一些用於處理文件路徑的小工具，直接引用即可使用。