ERROR in Entry module not found: Error: Can't resolve './src' in XXX的一个解决方案

本文解决了一个常见的Webpack打包问题,即“ERROR in Entry module not found”错误。通过检查配置文件路径、文件名及入口模块路径,成功解决了问题。适用于使用配置文件进行Webpack打包的Vue项目。

ERROR in Entry module not found: Error: Can't resolve './src' in XXX的一个解决方案

踩坑场景

今天在学习 Vue 的 webpack 时(使用配置文件配置),使用 webpack 命令打包项目时,报了 ERROR in Entry module not found: Error: Can't resolve './src' in XXX 的错误。报错截图以及项目目录如下:

img

在百度也找了找解决方案,有说 webpack 4.0 版本后可以不需要使用配置文件来打包项目(链接:https://www.cnblogs.com/tassel/p/12038104.html )。当时对这个解决方案的关键信息并不敏感,使用谷歌去搜索时,在github 中找到相应的解决方案。(链接:https://github.com/webpack/webpack/issues/6858 )。如图:

image-20200524111246459

翻译过来就是: 在 https://webpack.js.org/concepts/ 这个网址中写道:“自从 v4.0.0 版本开始,webpack 不再需要配置文件”。

没有配置文件,webpack 仅在存在 scr/index.js 文件时才有效。这个信息(使用粗体)在文档中明确标明。

我们根据这条评论,点进这个网址,文本如下(如有需要可以自己翻译或进入这个网址查看):

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Learn more about JavaScript modules and webpack modules here.

Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to better fit your needs.

由于我是使用配置文件来使用 webpack 打包项目的,所以我往下查找配置文件配置的官方描述:

Entry
An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

By default its value is , but you can specify a different (or multiple entry points) by setting an entry property in the webpack configuration. For example:./src/index.js

并且有一段示例代码:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

然后我回去检查我的项目结构,发现我配置文件的文件名写错了!(也太低级的错误了吧,捂脸.jpg)

官方中明确说明,如果使用配置文件使用 webpack 打包项目,则文件名是 webpack.config.js 。而我根据以前配置文件命名的习惯,写了 webpack-config.js 。所以配置文件名中是 .config,而不是 -config ,修改下文件名即可。

是不是很低级的错误,捂脸.jpg。我这里再总结一下我百度和谷歌搜到的解决方案的综合吧!

解决方案

  1. 检查 entry 配置的路径是否出错
  2. 检查 webpack.config.js 的路径是否出错,webpack.config.js 必须是放在根目录下
  3. 检查配置文件文件名是否出错,是 webpack.config.js 而不是 webpack-config.js
  4. 如果是 v4.0.0 以上版本的 webpack,可以不使用配置文件配置 webpack ,使用官网推荐的使用 ./src/index.js 作为入口点
我现在webpack的版本是4.47.0,这是我的webpack.config.js var webpack = require('webpack'); var each_file = require('./entry.config'); // var pagesArray = require('./pagesArray'); const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("mini-css-extract-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); const UglifyJsPlugin = require('terser-webpack-plugin'); //const TerserPlugin = require("terser-webpack-plugin-legacy"); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { // 配置入口 // entry: { // // meeting:'./src/pages/meeting/meeting.js', // // meeting_login:'./src/pages/meeting/meeting_login.js', // // meeting_rooms:'./src/pages/meeting/meeting_rooms.js', // // room_detail:'./src/pages/meeting/room_detail.js', // // room_used:'./src/pages/meeting/room_used.js', // // room_edit:'./src/pages/meeting/room_edit.js' // // index:'./src/pages/share/index.js', // article:'./src/pages/share/article.js', // // recommend:'./src/pages/share/recommend.js', // // urlGenerate:'./src/pages/share/urlGenerate.js', // preselectionDetails:'./src/pages/share/preselectionDetails.js', // homePage:'./src/pages/knowledge/homePage.js', // knowledgeList:'./src/pages/knowledge/knowledgeList.js', // knowledgeType:'./src/pages/knowledge/knowledgeType.js', // person:'./src/pages/knowledge/person.js', // iconKnowledgeList:'./src/pages/knowledge/iconKnowledgeList.js', // addKnowledge:'./src/pages/knowledge/addKnowledge.js', // showKnowledge:'./src/pages/knowledge/showKnowledge.js' // }, entry: each_file, // 配置出口 output: { path: __dirname + "/piccscqywx/", filename: 'js/[name]-[hash:5].js', publicPath: '/piccscqywx/', }, module: { loaders: [ //解析.js { test: '/\.js$/', loader: 'babel', exclude: path.resolve(__dirname, 'node_modules'), include: path.resolve(__dirname, 'src'), query: { presets: ['env'] } }, // css处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, // less处理 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 图片处理 { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', query: { name: 'assets/[name]-[hash:5].[ext]' }, },{ test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), // 提取css单独打包 new ExtractTextPlugin(__dirname + '/src/css/[name].css'), new UglifyJsPlugin(),//压缩js // new TerserPlugin({ // parallel: true, // sourceMap: false, // terserOptions: { // compress: { // warnings: false // } // } // }), //压缩css new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: {removeAll: true } }, canPrint: true }), // pagesArray.forEach((page)=>{ // new HtmlWebpackPlugin({ // template: page.template, // filename: page.filename, // chunks: ['vendors', page.chuckName], // inject: 'head', // inlineSource: '.(js|css)$', // minify: { // removeComments: true, // collapseWhitespace: true //删除空白符与换行符 // } // }); // }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/error.html', template: __dirname + "/src/pages/error.html", chunks: ['error'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/meeting.html', // template: __dirname + "/src/pages/meeting/meeting.html", // chunks: ['meeting'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/meeting_login.html', // template: __dirname + "/src/pages/meeting/meeting_login.html", // chunks: ['meeting_login'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/meeting_rooms.html', // template: __dirname + "/src/pages/meeting/meeting_rooms.html", // chunks: ['meeting_rooms'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/room_detail.html', // template: __dirname + "/src/pages/meeting/room_detail.html", // chunks: ['room_detail'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/room_edit.html', // template: __dirname + "/src/pages/meeting/room_edit.html", // chunks: ['room_edit'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/room_used.html', // template: __dirname + "/src/pages/meeting/room_used.html", // chunks: ['room_used'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/recommend.html', template: __dirname + "/src/pages/share/recommend.html", chunks: ['recommend'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/urlGenerate.html', template: __dirname + "/src/pages/share/urlGenerate.html", chunks: ['urlGenerate'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/preselectionDetails.html', template: __dirname + "/src/pages/share/preselectionDetails.html", chunks: ['preselectionDetails'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/index.html', template: __dirname + "/src/pages/share/index.html", chunks: ['index'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/article.html', template: __dirname + "/src/pages/share/article.html", chunks: ['article'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/homePage.html', template: __dirname + "/src/pages/knowledge/homePage.html", chunks: ['homePage'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/knowledgeType.html', template: __dirname + "/src/pages/knowledge/knowledgeType.html", chunks: ['knowledgeType'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/person.html', template: __dirname + "/src/pages/knowledge/person.html", chunks: ['person'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/knowledgeList.html', template: __dirname + "/src/pages/knowledge/knowledgeList.html", chunks: ['knowledgeList'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/iconKnowledgeList.html', template: __dirname + "/src/pages/knowledge/iconKnowledgeList.html", chunks: ['iconKnowledgeList'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }), // new HtmlWebpackPlugin({ // hash:true, // inject: 'head', // filename: __dirname + '/piccscqywx/addKnowledge.html', // template: __dirname + "/src/pages/knowledge/addKnowledge.html", // chunks: ['addKnowledge'], // inlineSource: '.(js|css)$', // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } // }), new HtmlWebpackPlugin({ hash:true, inject: 'head', filename: __dirname + '/piccscqywx/showKnowledge.html', template: __dirname + "/src/pages/knowledge/showKnowledge.html", chunks: ['showKnowledge'], inlineSource: '.(js|css)$', minify:{ removeComments: true,//删除注释 collapseWhitespace:true//删除空格 } }) ], devServer: { contentBase: "./piccscqywx/", historyApiFallback: true, inline: true, hot: true, port:8082, host: 'localhost', proxy:{ // '/WXWeb/$sctwo/wx_picc_app/WECHAT/draw/getHasReceiveGiftOld':{ // target:'http://smsp.epicc.com.cn/WXWeb/$sctwo/wx_picc_app/WECHAT/draw/getHasReceiveGiftOld', // secure:false, // changeOrigin: true, // } } } } 需要怎么去改造
最新发布
11-26
/* jshint node:true */ const path = require('path'); const fs = require('fs'); const webpack = require('webpack'); const packageJson = require('./package.json'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const TerserPlugin = require('terser-webpack-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); // === Git Revision Plugin with Fallback & Logging === let gitRevisionPlugin; try { const GitRevisionPlugin = require('git-revision-webpack-plugin'); gitRevisionPlugin = new GitRevisionPlugin({ commithashCommand: 'git rev-parse HEAD', versionCommand: 'git describe --always --dirty', }); gitRevisionPlugin.commithash(); // 触发测试 } catch (e) { console.warn('[Git] Not available:', e.message); gitRevisionPlugin = { version: () => 'unknown', commithash: () => 'unknown', branch: () => 'unknown' }; } // === 支持的语言列表 === let supportedLangs = []; try { supportedLangs = fs.readdirSync('./locales/') .filter(filename => /\.json$/.test(filename)) .map(filename => { try { const file = require(`./locales/${filename}`); return Object.values(file.translation).some(v => typeof v === 'string') ? filename : null; } catch { return null; } }) .filter(Boolean) .map(filename => filename.replace(/\.json$/, '')); } catch (e) { console.warn('[Locales] Failed to read languages:', e.message); } const MOMENTJS_LOCALES = [...new Set(supportedLangs.map(lang => lang.split('-')[0]))]; const JS_BUNDLE_NAME = 'jsxc.bundle.js'; // === 依赖许可证收集 === const dependencies = Object.keys(packageJson.dependencies).map(name => { try { const pkg = require(`./node_modules/${name}/package.json`); return `${pkg.name}@${pkg.version} (${pkg.license || 'unknown'})`; } catch (e) { return `${name}@unknown (read error: ${e.message})`; } }).join(', '); // === File Loader:扁平化输出 === const fileLoader = { loader: 'file-loader', options: { name: '[name]-[sha1:hash:hex:8].[ext]', outputPath: 'assets/', publicPath: 'dist/assets/' } }; // === 输出目录 === const OUTPUT_PATH = path.resolve(__dirname, './dist/'); // === 基础配置对象(不包含动态参数)=== let config = { entry: ['./scss/main.scss', './src/index.ts'], output: { filename: JS_BUNDLE_NAME, chunkFilename: "[name].chunk.js", path: OUTPUT_PATH, publicPath: 'dist/', libraryTarget: 'var', library: 'JSXC', clean: true, }, optimization: { splitChunks: { minSize: 10, cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true } } }, }, performance: { maxEntrypointSize: 3 * 1024 * 1024, maxAssetSize: 3 * 1024 * 1024, }, module: { rules: [ { test: /\.ts$/, loader: 'ts-loader', include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'test')], options: { transpileOnly: true, }, }, { test: /\.hbs$/, loader: 'handlebars-loader', include: path.resolve(__dirname, 'template'), options: { helperDirs: [path.resolve(__dirname, 'template', 'helpers')], partialDirs: [path.resolve(__dirname, 'template', 'partials')] } }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.(sass|scss)$/, include: path.resolve(__dirname, 'scss'), use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false } }, 'sass-loader' ] }, { test: /\.(png|jpg|gif|mp3|wav|svg)$/, use: [fileLoader] }, { test: /\.js$/, resourceQuery: /path/, use: [fileLoader] } ] }, resolve: { extensions: [".ts", ".js", ".hbs", ".json"], alias: { '@connection': path.resolve(__dirname, 'src/connection/'), '@ui': path.resolve(__dirname, 'src/ui/'), '@util': path.resolve(__dirname, 'src/util/'), '@vendor': path.resolve(__dirname, 'src/vendor/'), '@src': path.resolve(__dirname, 'src/'), }, fallback: { fs: false, stream: false, path: false, crypto: false, process: false, } }, externals: { 'child_process': 'child_process', 'webworker-threads': 'webworker-threads' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', process: 'process/browser', }), new MiniCssExtractPlugin({ filename: 'styles/jsxc.bundle.css', }), new CopyWebpackPlugin({ patterns: [ { from: 'images/', to: 'images/' }, { from: 'fonts/', to: 'fonts/' }, { from: 'sound/', to: 'sound/' }, { from: 'node_modules/emojione/assets/svg/', to: 'images/emojione/' }, { from: 'LICENSE', to: 'LICENSE' }, { from: 'README.md', to: 'README.md' }, { from: 'example/index.html', to: 'example/index.html' }, { from: 'example/css/', to: 'example/css/' }, { from: 'example/js/', to: 'example/js/' }, ], }), new webpack.LoaderOptionsPlugin({ options: { handlebarsLoader: {} } }), new webpack.ContextReplacementPlugin( /moment[/\\]locale$/, new RegExp(`^\\./(${MOMENTJS_LOCALES.join('|')})$`) ), new ForkTsCheckerWebpackPlugin(), ], devServer: { injectClient: false, port: 8091, inline: true, publicPath: '/dist/', open: true, openPage: 'example/index.html', proxy: { "/http-bind": "http://localhost:5280", "/libsignal": "http://localhost", "/xmpp-websocket": "ws://localhost:5280" }, watchOptions: { aggregateTimeout: 1300, ignored: [ path.resolve(__dirname, 'dist'), path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '.git'), path.resolve(__dirname, 'test'), '**/*.swp', ] } }, }; // === 动态导出函数(根据 argv 修改 config)=== module.exports = (env, argv) => { // --- 设置 mode --- if (typeof argv.mode === 'string') { config.mode = argv.mode; } // --- 动态设置 version --- let version; const buildDate = new Date().toISOString(); if (argv && argv.release) { version = packageJson.version; // 正式发布 } else if (process.env.BUILD === 'release') { version = packageJson.version; } else { version = packageJson.version + '-git.' + gitRevisionPlugin.version(); } // --- 设置输出文件名 --- if (config.mode === 'production') { config.output.filename = 'jsxc.bundle.min.js'; config.devtool = 'source-map'; } else { config.devtool = 'eval-source-map'; } // --- 生产压缩 --- if (config.mode === 'production') { config.optimization.minimizer = [ new TerserPlugin({ terserOptions: { compress: { drop_console: true, drop_debugger: true, keep_fnames: /Session$/ }, format: { comments: false } }, extractComments: false }) ]; } // --- 注入全局变量 --- const definePluginConfig = { __VERSION__: JSON.stringify(version), __BUILD_DATE__: JSON.stringify(buildDate), __BUNDLE_NAME__: JSON.stringify(config.output.filename), __DEPENDENCIES__: JSON.stringify(dependencies), __LANGS__: JSON.stringify(supportedLangs), 'process.env.NODE_DEBUG': JSON.stringify(false), }; config.plugins.push(new webpack.DefinePlugin(definePluginConfig)); // --- 添加 Banner --- config.plugins.push(new webpack.BannerPlugin({ banner: `JavaScript XMPP Client - the open chat Version: ${version} Commit: ${gitRevisionPlugin.commithash()} Branch: ${gitRevisionPlugin.branch()} Build date: ${buildDate} Homepage: ${packageJson.homepage} JSXC is released under the MIT license, but this file also contains dependencies which are released under a different license. Dependencies: ${dependencies} Licensed under MIT.`, raw: false, entryOnly: true })); // --- Bundle Analyzer --- if (argv && argv.bundleAnalyzer) { config.plugins.push(new BundleAnalyzerPlugin()); } return config; }; 全面修复生成完整版源文件
11-11
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值