Question

我已经轻松地为js + css设置了我的webpack配置，现在我试图更新配置以生成仅限css的捆绑包。这种需求的原因是为登录页面和应用程序本身分离捆绑包。这是我的配置（非常简化，但我保留了可能相关的所有内容）：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    'bootstrap-loader',
    './web/static/app/js/index.js'
  ],
  output: {
    path: './priv/static',
    filename: 'js/app.js',
    publicPath: '/',
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        plugins: ['transform-decorators-legacy'],
        presets: ['react', 'es2015', 'stage-2', 'stage-0'],
      }
    }, {
      test: /bootstrap\/dist\/js\/umd\//,
      loader: 'imports?jQuery=jquery'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
    }],
  },
  resolve: {
    extensions: ['', '.js', '.scss', '.css'],
    modulesDirectories: ["node_modules", __dirname + "/web/static/app/js"],
    alias: {
      styles: __dirname + '/web/static/app/styles'
    }
  },
  plugins: [
    new ExtractTextPlugin('css/[name].css')
  ]
};

目前它生成css / app.css和js / app.js就好了，我想要实现的是从web / static / landing / index.scss生成css / landing.css

我尝试了什么：

我将'./web/static/landing/js/index.js'添加到module.exports.entry，添加了

var extractSCSS_app = new ExtractTextPlugin('css/app.css');
var extractSCSS_landing = new ExtractTextPlugin('css/landing.css');

并用以下内容替换了scss loader：

}, {
      test: /app\/.*?\.scss$/,
      loader: extractSCSS_app.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
    }, {
      test: /landind\/.*?\.scss$/,
      loader: extractSCSS_landing.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
    }, {

在插件中我已经放了

extractSCSS_app,
extractSCSS_landing,

几乎每篇关于webpack的文章我发现描述js + css包的配置和文档对我来说都不清楚这个问题，所以我试过的是我想象的可能是正确的。不幸的是，它不是，这就是为什么我在这里：）

Answer 1

快速浏览您的问题。这可能是一个错字。注意这一行

 test: /landind\/.*?\.scss$/

Landind而不是降落？深夜编码哈哈？

webpack中有2个包：1个用于js + css，1个用于css

1 个答案: