仅在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']
}

将创建两个seprate文件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对象上添加errors属性

然后你的移民就像

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或从JavaScript文件中extract-text-webpack-plugin分离css内容

要创建独立errors.css文件,您需要使用两个不同的实例,extract-text-wepack-plugin一个用于常规css文件,一个用于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
      ]