在學習 webpack 的時候出現(xiàn)了一個問題 npm 打包的時候直接報錯了哀九。
錯誤展示
ERROR in ./src/main.js
Module not found: Error: Can't resolve './css/index' in 'D:\webpack_space\learn-webpack\src'
@ ./src/main.js 3:13-35
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!node_modules/less-loader/dist/cjs.js!src/css/less.less:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/less.less] 217 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js!src/css/sass.sass:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/css/sass.sass] 184 bytes {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
images/a4cba8674b30938bf41eacf2d04b3b52.jpg 22.4 KiB [emitted]
+ 1 hidden asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 440 bytes {0} [built]
[./src/images/1.jpg] 89 bytes {0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! learn-webpack@1.0.0 build: `webpack --config=config/webpack.dev.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the learn-webpack@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zhoulin\AppData\Roaming\npm-cache\_logs\2019-03-22T10_35_54_503Z-debug.log
其實遇到這種 Exit status 2 的問題辜昵,都是因為缺失依賴關(guān)系造成的原因較多荸镊。例如,需要的文件沒有找到堪置,或者是依賴的包有問題」妫現(xiàn)在就來看看問題,里面有一句話“Module not found: Error: Can't resolve './css/index' in 'D:\webpack_space\learn-webpack\src” @ ./src/main.js 3:13-35 因為有個文件它不知道按照什么類型來處理舀锨。來看具體的代碼
因為 index.css 沒有添加后綴名岭洲,其實解決辦法也很方便。我們可以讓webpack自己去找例如:
// webpack.config.js 中配置
model.exports = {
resolve: {
extensions: [".ts", ".js", ".css"]
}
}