javascript - web pack 4 中的非 JavaScript 资源是否需要入口点？

Question

我成功让 webpack 生成非 JavaScript 文件的唯一方法是包含主要资源的条目。问题是，webpack 也会基于此资源生成一个 .js 文件，这是不必要的。这是在 webpack 配置中使用非 JavaScript 资源的正确方法吗？

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const outputDir = 'build';
const extractStylus = new ExtractTextPlugin('../css/screen.css');

module.exports = {
  entry: {
    app: './src/js/index.js',
    print: './src/js/print.js',
    stylus: './src/stylus/screen.styl'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.styl$/,
        use: extractStylus.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'stylus-loader']
        })
      }
    ]
  },
  plugins: [extractStylus],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, `${outputDir}/js`)
  }
};

有问题的特定行是 entry 对象的一部分:

stylus: './src/stylus/screen.styl'

如果没有该行，则不会生成任何内容，但是使用该行，则会生成预期的 .css 以及 stylus.bundle.js 文件。

Answer 1

我认为您误解了 entry 属性在 webpack 配置中的作用:

An entry point indicates which module webpack should use to begin building out its internal dependency graph. After entering the entry point, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

Every dependency is then processed and outputted into files called bundles, which we'll discuss more in the next section.

[source, emphasis mine]

如果不指定条目，webpack 将不知道在哪里查找文件；即使依赖图不是有向的(事实确实如此)，您也需要将 webpack 指向该图的至少一个点。

即使您只处理 Assets ，也会生成 JS 文件的小问题是 webpack 通常使用方式的结果 - 作为一些用 JS 编写的应用程序逻辑的 Assets 管理器/编译器。因此，理论上，如果您需要通过 NodeJS 风格的 require 使用编译后的资源，您可以使用生成的 stylus.bundle.js。