Question

我成功使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文件。

Answer 1

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

一个入口点表示哪个模块webpack应该用于开始构建其内部依赖关系图。进入入口点后，webpack将确定入口点所依赖的其他模块和库（直接和间接）。

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

[source，强调我的]

如果没有指定entry，webpack就不知道在哪里查找文件;即使依赖图不是方向性的（它是），你需要将webpack指向图的至少一个点。

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

Web Pack 4中的非JavaScript资源是否需要入口点？

1 个答案: