Webpack 4集成semantic-ui-react遇模块未找到错误求助

看起来你遇到的模块未找到问题大概率和依赖安装不完整、Webpack配置错误或者资源路径不对有关，我帮你一步步梳理排查：

1. 确认依赖是否安装完整 #

semantic-ui-react本身只提供React组件，样式文件需要单独安装semantic-ui-css包。你已经在index.js里导入了semantic-ui-css/semantic.min.css，但如果没安装这个包，Webpack肯定会报错找不到模块。

先执行以下命令补全依赖：

npm install semantic-ui-react semantic-ui-css --save

2. 修复HtmlWebpackPlugin配置 #

你的webpack.config.js里把HtmlWebpackPlugin的核心配置（template、filename等）都注释掉了，这会导致插件无法正确读取你的模板文件，生成的HTML要么路径错误，要么无法正确注入打包后的JS资源。

修改plugins里的HtmlWebpackPlugin配置：

new HtmlWebpackPlugin({
  inject: true, // 让插件自动注入JS/CSS，无需手动写script标签
  hash: true,
  template: "./src/index.html",
  filename: "../index.html" // 因为你的output.path是dist/assets，所以把HTML生成在dist根目录，保证资源路径正确
}),

3. 简化index.html内容 #

因为开启了inject: true，HtmlWebpackPlugin会自动帮你插入打包后的JS文件，所以可以删掉index.html里手动添加的script标签，避免路径错误或重复引入：

<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
</head>
<body>
<div id="app"></div>
<!-- 这里的script标签可以删掉，由HtmlWebpackPlugin自动注入 -->
</body>
</html>

（注：你同时引入了CDN的样式和本地的semantic-ui-css，其实二选一即可，避免样式重复）

4. 补全资源加载依赖 #

你的Webpack配置里用了url-loader处理字体、图片等资源，但url-loader在处理超过limit的文件时依赖file-loader，如果没安装的话会导致semantic-ui里的字体文件无法加载，间接引发模块错误。

安装file-loader：

npm install file-loader --save-dev

5. 开启CleanWebpackPlugin清理缓存 #

你注释掉了CleanWebpackPlugin，建议开启它，每次构建前清理dist目录，避免旧的缓存文件干扰：

new CleanWebpackPlugin(['dist']),

完成以上步骤后，重新执行npm run build（或你对应的构建命令），应该就能解决模块未找到的问题了。

内容的提问来源于stack exchange，提问作者Riya