0

我成功让 webpack 生成非 JavaScript 文件的唯一方法是entry为主要资产包含一个。问题是，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文件和文件。

4

1 回答 1

1

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

入口点指示 webpack 应该使用哪个模块来开始构建其内部依赖图。进入入口点后，webpack 会弄清楚该入口点（直接和间接）依赖的其他模块和库。

然后处理每个依赖项并将其输出到称为捆绑包的文件中，我们将在下一节中详细讨论。

[来源，强调我的]

如果不指定entry，webpack 将不知道在哪里查找您的文件；即使依赖图不是定向的（确实如此），您也需要将 webpack 指向图中的至少一个点。

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

于 2018-04-10T20:39:06.407 回答