鍍金池/ 問答/HTML/ webpack將打包目錄下的md、html文件解析了

webpack將打包目錄下的md、html文件解析了

webpack將打包目錄下的md、html文件解析了,我并沒有在其他js文件中引入它們
這些解析失敗的警告讓我很難受

圖片描述

我是不是就不應(yīng)該將這些文件放在我的打包目錄下?
我并沒有設(shè)置這些文件的loader;

如上圖的./src lazy ^\.\/.*$是從何而來的?

回答
編輯回答
笑忘初

webpack 加載不加載哪個文件, 與你把文件放在哪個目錄無關(guān), 與你設(shè)不設(shè)置 loader也無關(guān)。
webpack 打包的時候會靜態(tài)代碼分析:從入口文件開始, 把你require/import的文件打包。
比如 import xx from './src/xx', 那么xx.js 將會被打包,同時會打包xx.js 里面的require/import打包。
類似 ‘./src/xx’這種路徑,靜態(tài)分析的時候是知道文件目錄的,打包沒有問題。 那么假如路徑里面包含變量呢? 比如

var path = ...
require('./src/' + path)

這種時候靜態(tài)分析并不能確切的知道打包src下的哪個文件。此時webpack會打包src下的所有文件。 所以題主 會看到 './src ^./.*$ ' 這樣的路徑。
webpack內(nèi)部會記錄一個 文件名與 webpack內(nèi)部地址的 map記錄。 從而在運(yùn)行的時候加載。 為了方便理解,貼一下 這種情況webpack打包之后的代碼:

 (function(module, exports, __webpack_require__) {

var map = {   
    "./fd1": 0,
    "./fd1.js": 0,
    "./fd2": 1,
    "./fd2.js": 1
};
function webpackContext(req) {
    return __webpack_require__(webpackContextResolve(req));
};
function webpackContextResolve(req) {
    var id = map[req];
    if(!(id + 1)) // check for number or string
        throw new Error("Cannot find module '" + req + "'.");
    return id;
};
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = 4;

/***/ }),
2018年4月5日 02:08