Javascript 将所有部件与webpack放在一起

我在网上看到很多关于webpack的分散的、零碎的、完整的但一般化的教程，但是我很难把这些部分放在一起，所以我想我应该直接问一下

我想使用webpack使用css预处理器（即触控笔）和后处理（如autoprefix）、缩小图像、传输javascript（即使用babel），并且我使用Vue JS加载.Vue文件，他们已经为自己的部分提供了说明。该项目很大，所以我需要将其分解为异步加载的块

现在我在网上看到了很多关于这方面的教程，但他们认为你知道我不知道的网页基本知识，所以我很困惑。如果这对我有帮助的话，我来自一个浏览/吞咽的背景，这些问题我还没有弄清楚：

• 我可以看出，如果定义了正确的加载程序，我假设需要所有东西，包括像样式表或图像这样的非js代码，但我仍然不太理解这一点，在代码中需要图像对我有什么帮助，我应该将这些非js代码放在哪里
• CSS与javascript是分开的，所以，像上面一样，我在javascript代码中需要CSS，这不是有点多余，因为它不是javascript，所以我不能执行它
• 对于代码输出，特别是块和散列名称，我如何开始将其包含在index.html文件中。这尤其适用于css，我收集的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
    ]
};

---

对我来说，一点一点地挖掘网页包更容易

webpack的最低设置（仅将多个文件捆绑到一个文件中）如下所示：

const webpack = require('webpack');

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

在配置的基础上，您可以使用一步一步地构建附加功能

加载器基本上是一种读取文件内容并以某种方式进行转换的东西。它可以是将ES6传输到ECMAScript 5的

babel加载程序

，也可以是将文件内容显示为base64字符串的

base64加载程序

你可以从一个整体中挑选。每一个都有一个github存储库，其中包含一个自述文件，其中包含使用示例

总而言之，了解webpack是如何工作的、它是如何构造的、什么是加载程序和插件是非常重要的。Webpack是一个很好的起点

---

复制粘贴一个巨大的配置，并尝试猜测其中哪些部分有用，这将非常困难。

老实说，你需要在网页上多读一些内容。那里有很多教程，网站上的文档也相当不错。谢谢，我想我没有意识到从browserify切换到webpack的学习曲线，它看起来不是一个很大的学习曲线，但是有一点学习。你的回答很有道理，我想我从browserify匆忙进入网页，我可能会创建一个side hello world项目，并从那里慢慢建立，以了解更大的图景。