时间戳

首页 > 解决方案 > Webpack SCSS 和 Babel 配置问题

webpack - Webpack SCSS 和 Babel 配置问题

问题描述

节日快乐！

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

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

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

这是我的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，尽管404 error对于 css 和 bundle.js 文件，它的工作很奇怪。

大家能帮帮我吗？

标签： webpacksassbabeljs

解决方案

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

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

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

<!-- 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'
}),

推荐阅读