仅在Webpack中的特定入口点输出样式表而不生成任何脚本？

Question

我的webpack配置中有多个入口点用于登录，应用程序，错误页面，我只需要登录和应用程序输出这些条目的js文件，错误只输出样式。目前所有条目都输出样式和脚本，我不太确定如何具体获取输出的内容？

的WebPack

entry: {
    'main': [
        'babel-polyfill',
        './source/styles/src/imports/main/main.scss',
        './source/app/app.main.js'
    ],
    'login': [
        './source/styles/src/imports/login/login.scss',
        './source/scripts/login.js'
    ],
    'errors': './source/styles/src/imports/errors/errors.scss'
},

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './scripts/[name]/[name].min.js',
    chunkFilename: './scripts/chunks/[id].[name].min.js'
}

输出

dist/
    scripts/
        errors/ <---- doesn't need to be here
        main/
        login/
    styles/
         errors/
         main/
         login/

任何人都可以建议我如何排除错误在脚本中输出？

Answer 1

Webpack为您的条目对象中的每个key创建单独的文件

入口对象的key决定创建单独文件的name和该密钥的value决定在该文件中包含什么content

如果你不想创建一个单独的文件，但在你的包中包含它的内容，那么只需在你之前的条目中添加该文件的路径

例如

entry: {
  main: ['src/js/main.js'],
  app: ['src/js/app.js']
}

将创建两个单独的文件1.qazxsw poi和2.qazxsw poi及其各自的内容

和

main.js

将创建一个文件app.js（因为入口对象的键称为

entry: {
  main: ['src/js/main.js', 'src/js/app.js']
}

），其中包含两个文件的内容

和

main.js

将aslo创建一个文件main（因为入口对象的键称为

entry: {
  app: ['src/js/main.js', 'src/js/app.js']
}

），其中包含两个文件的内容

因此，如果您不想创建单独的错误文件但包含它的内容，则不要在app.js对象上添加errors属性

然后你的配置就像

app

另请注意，您需要使用entry或

entry: {
    'main': [
        'babel-polyfill',
        './source/styles/src/imports/main/main.scss',
        './source/app/app.main.js',
        './source/styles/src/imports/errors/errors.scss' <--- so that webpack know to include content of that file also
    ],
    'login': [
        './source/styles/src/imports/login/login.scss',
        './source/scripts/login.js'
    ]
}

从JavaScript文件中分离style-loader内容

要创建独立的extract-text-webpack-plugin文件，你需要使用两个不同的css实例，一个用于常规css文件，一个用于errors.css文件，并使用errors.css extract-text-wepack-plugin属性来分隔

include

Answer 2

您可以使用此webpack插件：exclude

它从css块中找到js文件，并从编译中删除js文件。

只需添加到您的webpack.config，如下所示：

    const extractCSS = new ExtractTextPlugin('main.css');
    const extractERRORS = new ExtractTextPlugin('errors.css');
    . 
    .
    .
module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /errors/,
        use: extractCSS.extract([ 'css-loader', 'sass-loader' ])
      },
      {
        test: /\.scss$/,
        include: /errors/,
        use: extractERRORS.extract([ 'css-loader', 'sass-loader' ])
      },
    ]
  },

      plugins: [
       extractCSS,
       extractERRORS
      ]