Webpack devtool не имеет никакого эффекта в режиме разработки - PullRequest
Новая
       4

Webpack devtool не имеет никакого эффекта в режиме разработки

2 голосов
/ 24 января 2020

Я довольно озадачен тем, как настройка devtool в вебпаке работает в веб-пакете 4.41.5. Документация предлагает полный список различных способов настройки исходных карт с различными компромиссами. При построении в производственном режиме они, похоже, имеют различные эффекты, но в режиме разработки между этими настройками нет никакой разницы. Вот пример:

запись. js: 

// trivial entry point
console.log('hello world');

webpack.config. js: 

module.exports = [
    false, 'eval', 'eval-cheap-source-map', 'eval-cheap-module-source-map', 'eval-source-map',
    'cheap-source-map', 'cheap-module-source-map', 'inline-cheap-source-map', 'inline-cheap-module-source-map',
    'source-map', 'inline-source-map', 'hidden-source-map', 'nosources-source-map'
].map(tool => ({
    entry:   './entry.js',
    devtool: tool,
    output: {
        path: __dirname,
        filename: `./[name]-${tool}.js`
    },
}));

Вот результат сборки: 

$ node_modules/.bin/webpack -d
< lots of output >
$ sha1sum main-*.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-eval-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-false.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-hidden-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-cheap-module-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-cheap-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-inline-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-nosources-source-map.js
a479a5b3b67961d9ec19dbcbf2b8c67a80c1ec90  main-source-map.js

Все они точно одинаковы и включают в себя следующее: 

eval("console.log('hello world');\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9lbnRyeS5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2VudHJ5LmpzPzA5OGYiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJyk7XG4iXSwibWFwcGluZ3MiOiJBQUFBOyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./entry.js\n");

Очевидно, что все они включают карту источника, даже если явно просят не включать один (main-false. js), и все они включают полный исходный код, даже когда запрашивается не делать этого (main-nosources-source-map. js, декодированная строка base64 содержит источник).

Очевидно, что параметр devtool не является тем, который должен оказывать влияние только в производственном режиме, поскольку многие параметры помечены как production: нет в документации.

Сделал Я серьезно не понимаю, что должен делать этот параметр?

1 Ответ

1 голос
/ 24 января 2020

Вы передаете CLI веб-пакета флаг -d [1], который приравнивает (расширяет) к следующему: 

--debug --devtool cheap-module-eval-source-map --output-pathinfo

Следовательно, вы перезаписываете значение конфигурации каждой конфигурации devtool с помощью "cheap-module-eval-source-map" .

Попробуйте выполнить команду без флага -d, т.е. просто node_modules/.bin/webpack.

[1] https://webpack.js.org/api/cli/#shortcuts

...