webpack中require和import的区别

Question

如题所述

Answer 1

1）将filename对应于entry里面生成出来的文件名。
{

entry: {
"index": "pages/index.jsx"
},
output: {
filename: "[name].min.js",
chunkFilename: "[name].min.js"
}
}

生成出来的文件名为index.min.js。

2）按需加载（异步）模块的时候，使用CommonJS的方式异步加载模块，列在entry：
require.ensure(["modules/tips.jsx"], function(require) {

var a = require("modules/tips.jsx");
// ...
}, 'tips');

异步加载的模块是要以文件形式加载，生成的文件名是以chunkname配置的，生成出的文件名就是tips.min.js。
wayou.sayName();
wayou.program();
}, 'Programmer');

let animal = new Animal('dummy');
animal.sayName();

3）（require.ensure() API的第三个参数是给这个模块命名，否则
chunkFilename: "[name].min.js" 中的[name] 是一个自动分配的、可读性很差的id。

4）按照上述修改才可以单纯的指定代码分块的输出目录而又不影响其它资源的打包目录。