Webpack SCSS和Babel配置问题

Question

节日快乐！

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

1. 最小化我的HTML
2. 编译SCSS并最小化CSS
3. 通过Babel运行我的JS并将其最小化
4. 最终，优化图像

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

这是我的Webpack config

我的项目结构如下...

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。

可以请大家帮忙吗？

Answer 1

您的Webpack配置很好。问题出在您正在使用的index.html模板文件中：js捆绑软件src的{​​{1}}不正确。

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

解决此问题的另一种方法是完全删除模板文件中的硬编码脚本标签，并指示/bundle.js注入捆绑包：

它将知道要使用的正确src：

./bundle.js

HtmlWebpackPlugin