Webpack 常见问题与解答

joeyguo commented 8 years ago

1.同级目录的文件引用需要带上 './'

[Q] Module not found: Errorr: Cannot resolve module

ERROR in ./src/js/modules/header/index.jsx Module not found: Error: Cannot resolve module 'index.less' in C:\Users\Desktop\src\js\modules\header @ ./src/js/modules/header/index.jsx 5:0-21

[A] 将 require('index.less'); 替换为 require('./index.less');

2.window 使用 \ 作为路径分隔符

[Q] Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../node_modules/css-loader/index.js and Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../node_modules/style-loader/addStyles.js

ERROR in ./src/js/modules/header/index.less Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../node_modules/css-loader/index.js in C:\Users\Desktop/src\js\modules\header @ ./src/js/modules/header/index.less 4:14-134

ERROR in ./src/js/modules/header/index.less Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../node_modules/style-loader/addStyles.js in C:\Users\Desktop/src\js\modules\header @ ./src/js/modules/header/index.less 7:13-77

[A] webpack.config.js 中，路径的使用 path.join(dirname, 'src')，而不使用 dirname + '/src'，eg：

var path = require('path');
module.exports = {
    context: path.join(__dirname, 'src'),
    resolve: {
        root: path.resolve(__dirname, "src"),
        // root: __dirname + '/src',
    }
}

两者的不同，可看一下输出

console.log(path.resolve(__dirname, "src")); // 输出: C:\Users\joeyguo\Desktop\src
console.log(__dirname + '/src'); // 输出: C:\Users\joeyguo\Desktop/src

3.less-loader 的使用需要配套 less module

[Q] ERROR in Cannot find module 'less'

ERROR in Cannot find module 'less' @ ./src/js/modules/header/index.less 4:14-134

[A] install less module

npm install less less-loader --save-dev

未完，持续更新，欢迎讨论与补充~

amwamew commented 7 years ago

在本地下载webpack作为本地使用时,发现出了一个这个错误: [HMR] Waiting for update signal from WDS... build.js:4245 Uncaught Error: Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "D:\Font Data\vue\01day\Data\03day\src" at D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17 at Array.map (native) at Function.normalisePlugins (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at OptionManager.init (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at transpile (D:\Font Data\vue\01day\Data\03day\node_modules\babel-loader\lib\index.js:46:20) at Object.module.exports (D:\Font Data\vue\01day\Data\03day\node_modules\babel-loader\lib\index.js:155:20) build.js:4291 [WDS] Hot Module Replacement enabled. build.js:4291 [WDS] Errors while compiling. Reload prevented. build.js:4369 ./src/app.js Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "D:\Font Data\vue\01day\Data\03day\src" at D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17 at Array.map (native) at Function.normalisePlugins (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at OptionManager.init (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (D:\Font Data\vue\01day\Data\03day\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at transpile (D:\Font Data\vue\01day\Data\03day\node_modules\babel-loader\lib\index.js:46:20) at Object.module.exports (D:\Font Data\vue\01day\Data\03day\node_modules\babel-loader\lib\index.js:155:20) @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/app.jsonSocketMsg.errors @ build.js:4369

怎么解决啊?

joeyguo commented 7 years ago

@amwamew 未安装 transform-runtime 吗？看报错 Unknown plugin "transform-runtime"

RubyZhuuu commented 7 years ago

请问了解webpack对于循环依赖有处理方式吗？我看了一些文档得到的结论是webpack暂时并没有很好的处理循环依赖的方式

joeyguo / blog