Question

我在web上看到了很多分散的，支离破碎的，完整但通用的教程，但是我把这些部分放在一起很麻烦所以我想我只是直接问。

我想使用webpack来使用css预处理器（即手写笔）并进行后期处理（如自动修复），缩小图像，转换javascript（即使用babel），并且我正在使用Vue JS加载.vue文件，这些文件已经有了他们的部分说明。该项目很大，所以我需要将其分解为异步加载的块。

现在我在网上看到很多关于此的教程，但他们认为你知道Webpack fundementals，我不会这样，所以我很困惑。我来自browserify / gulp背景，如果这有帮助，这些是我还没有想到的问题：

我可以看到我想要一切包括非js代码，如样式表或给定正确加载器的图像，但我仍然不太明白这一点，如何在我的代码中需要一个图像帮助我，我想在哪里放置这些非js代码需要
CSS与javascript是分开的，所以，就像上面一样，我在javascript代码中需要哪些css，并不是因为它不是javascript而有点多余所以我无法执行它。
对于代码输出，特别是使用块和哈希名称，我如何开始在index.html文件中包含它。这特别适用于css，它来自我收集的内容，是从javascript文件中被要求捆绑的。 Everywhere告诉我将输出名称设置为build.js，bundle.js或[name] .js，但CSS代码不能包含在内，所以我不知道要在index.html文件中包含什么
我看到很多处理外部库的冲突方式，而且看起来非常碎片化，我只想拥有一组我想要首先加载的外部库。大多数不是为任何模块系统构建的，或者是期望窗口全局变量并且具有自己的依赖性
图片和其他媒体也让我感到困惑，我是否也需要在我的javascript或必需的css文件中使用它们，如果我在index.html文件中引用图像怎么办？我将如何处理webpack？

这些都是我想到的，但我想我会遇到很多基础知识，所以任何帮助都会受到高度赞赏。另外这里是我的webpack.config.js文件，因为我不确定它是否正确或者很多这些加载器的确如此，但我读过我需要它们

nextToken()

Answer 1

对我而言，逐渐深入挖掘webpack更容易。

webpack的最小设置（只是将多个文件捆绑成一个）看起来像这样：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  }
};

在该配置之上，您可以使用loaders一步一步地构建其他功能。

Loader基本上是一个读取文件内容并以某种方式转换它的东西。它可以是babel-loader将ES6转换为ECMAScript 5或base64-loader将文件内容转换为base64字符串。

您可以从整个list of modules中进行选择。每个人都有一个github存储库，其中包含一个自述文件，其中包含使用示例。

总而言之，了解webpack如何工作，如何配置结构，什么是加载器和插件，这一点非常重要。 Webpack的docs是一个很好的起点。

复制粘贴一个巨大的配置并试图猜测它的哪些部分是有用的将会困难得多。