仅在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。main.js和2。app.js以及各自的内容

和

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

将创建一个文件main.js（因为条目对象的键称为main），其中包含两个文件的内容

和

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

将同时创建一个文件app.js（因为条目对象的键称为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'
    ]
}

还请注意，您需要使用style-loader或extract-text-webpack-plugin将css内容与JavaScript文件分开

要创建独立的errors.css文件，您需要为常规css文件使用两个不同的extract-text-wepack-plugin实例，为errors.css文件使用一个实例，并使用include exclude属性分开

    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
      ]

Answer 2

您可以使用以下Webpack插件：webpack-fix-style-only-entries

它从仅css条目的块中查找js文件，并从编译中删除js文件。

只需添加到您的webpack.config中，就像这样：

// ... other plugins
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

module.exports = {
    // ...
    plugins: [
        new FixStyleOnlyEntriesPlugin(),
    ],
};