从 Webpack 2 中的编译中排除入口点答案

【问题标题】：Excluding entry point from compilation in Webpack 2从 Webpack 2 中的编译中排除入口点
【发布时间】：2018-06-20 12:06:20
【问题描述】：

在我的 webpack.config.js 文件中，我有几个 js 和 svg 入口点：

entry: {
        scripts: './src/js/app.js',
        vendor: ['vue', 'axios'],
        svg: glob.sync('./src/img/svg/*.svg')
},

对于我的 svg，我正在使用精灵加载器：

module: {
    rules: [
        ...
        {
            test: /\.svg$/,
            use: [
                {
                    loader: 'svg-sprite-loader',
                    // include: path.resolve('./src/img/svg'),
                    options: {
                        extract: true,
                        spriteFilename: 'img/sprite.svg'
                    }
                }
            ],
        }
    ]
},

但问题是当我在我的 js 文件夹中编译时会呈现 svg.js 文件。我怎样才能让 webpack 工作，这样 svg.js 不会被渲染。

【问题讨论】：

为了澄清你想要做什么 - 你是否试图使用插件从src/img/svg/*.svg中的所有精灵中输出img/sprite.svg的单个精灵表？
是的，没错。
通过省略svg 入口点，它不能按预期工作吗？这不会生成您在应用程序中使用并由 webpack 加载的 SVG 的精灵表吗？
我忽略了我的精灵不会被编译的入口点。
您能否通过一些有关如何将 SVG 加载到应用程序中的示例来更新您的问题？

标签： javascript svg webpack webpack-2

【解决方案1】：

在你的 webpack 配置中添加一个小插件：

module.exports = {
  plugins: [
    {
      apply: (compiler) => {
        compiler.plugin('emit', (compilation, callback) => {
          delete compilation.assets['svg.js'];
          callback();
        });
      }
    }
  ]
};

【讨论】：