Webpack SCSS 和 Babel 配置问题答案

【问题标题】：Webpack SCSS and Babel config problemsWebpack SCSS 和 Babel 配置问题
【发布时间】：2019-12-26 22:10:37
【问题描述】：

节日快乐！

我一直在努力建立一个基本的 Webpack 生成的静态站点来执行以下操作：

我意识到我可以使用 Jekyll、Next、Gabspy 等，但我想学习 Webpack 并“自己动手”。

我的项目结构如下...

Root
   src
      js
         ...
      scss
         ...
   dist
webpack.cong.js
app.js

我的 app.js 文件很简单：

import "./src/js/main.js";
import "./src/scss/style.scss";

我有一些问题。首先，我不能在这里弄清楚我的 bundle.js 文件、最小 CSS 文件、最小 html 文件被导出到。我不知道是在 webpack 配置中指定在此处导出这些文件。

结果，我的 css 奇怪地工作，尽管 css 和 bundle.js 文件的 404 error。

你们能帮帮我吗？

【问题讨论】：

明确一点，你的问题是你的CSS和JS文件没有生成？根据我在您的配置中看到的内容，您有 2 个目录，publicPath 和路径，您都签入了吗？
另外，当您在控制台中运行您的进程时，您是否收到任何错误输出？
当你说“签到”时，你指的是git吗？
来自“localhost:4444/dist/bundle.js”的资源由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: nosniff) 而被阻止。 localhost:4444 源“localhost:4444/dist/bundle.js”的
据我所知，bundle.js 没有生成

【解决方案1】：

你的 Webpack 配置没问题。问题出在您使用的 index.html 模板文件中：js 包的 src dist/bundle.js 不正确。

由于 index.html 文件是从 dist 文件夹中加载的，因此也将位于同一文件夹中的 JS 包的 src 应该类似于 /bundle.js 或 ./bundle.js。

解决此问题的另一种方法是完全删除模板文件中的硬编码脚本标记，并指示知道要使用的正确 src 的 HtmlWebpackPlugin 注入包：

<!-- src/index.html -->

<!-- delete this -->
<script src="dist/bundle.js"></script>

// webpack.config.js

// add this:
// ...

new HtmlWebpackPlugin({
  template: SRC_DIR + "/index.html",
  inject: 'head'
}),

【讨论】：