将所有部分与 webpack 放在一起 [关闭]

Question

我在网络上看到了很多零散、零散、完整但泛化的 webpack 教程，但我在将这些部分放在一起时遇到了很多麻烦，所以我想我还是直接问吧。

我想使用 webpack 来使用 css 预处理器（即手写笔）并进行后处理（如 autoprefix）、缩小图像、转译 javascript（即使用 babel），并且我正在使用 Vue JS 加载.vue 文件，他们已经有自己的说明。这个项目很大，所以我需要把它分解成异步加载的块。

现在我在网上看到很多关于这个的教程，但他们假设你知道 Webpack 基础知识，而我不知道，所以我很困惑。如果有帮助，我来自 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 文件，因为我不确定它是否正确，或者这些加载器中的许多究竟是做什么的，但我读到我需要它们

var webpack = require('webpack');

var commonsPlugin =
    new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

    entry: {
        main: './src/scripts/app/index.js',
        vendor: [
            "./src/scripts/lib/jquery.min.js",
            "./src/scripts/lib/jquery.qtip/jquery.qtip.min.js",
            "./src/scripts/lib/jquery.qtip/imagesloaded.pkg.min.js"
        ]
    },

    output: {
        path: __dirname + '/build',
        publicPath: '/',
        filename: '[name]-[hash].js'
    },

    node: {
        filename: true,
        process: true,
        global: true
    },

    resolve: {
        extensions: [
            '', // Any
            '.js', '.json', // Scripts & Scripts Data
            '.vue', // Vue
            'css', 'styl', // Styles
            'png', 'jpg', 'gif', 'svg' // Images
        ]
    },

    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.js$/,
            loader: 'babel'
        }, {
            test: /\.css$/,
            loader: ['style', 'css']
        }, {
            test: /\.styl$/,
            loader: ['style', 'css', 'stylus']
        },{
             test: /\.(png|jpg|gif|svg)$/,
             loader: 'url',
             query: {
                 // limit for base64 inlining in bytes
                 // Min 8KB
                 limit: 8 * 1024,

                 // custom naming format if file is larger than
                 // the threshold
                 name: '[name].[ext]?[hash]'
             }
        }]
    },

    plugins: [
        commonsPlugin
    ]
};

Answer 1

对我来说，一点一点地深入研究 webpack 会更容易。

webpack 的最小设置（只是将多个文件打包成一个）如下所示：

const webpack = require('webpack');

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

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

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

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

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

复制粘贴一个巨大的配置并尝试猜测其中的哪些部分有用会更加困难。