webpack 中的 2 个包：1 个用于 js+css，1 个仅用于 css答案

【问题标题】：2 bundles in webpack: 1 for js+css and 1 for css onlywebpack 中的 2 个包：1 个用于 js+css，1 个仅用于 css
【发布时间】：2016-07-23 06:33:57
【问题描述】：

我已经轻松地为 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 加载器替换为以下内容：

}, {
      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 捆绑配置和文档，我对这个问题并不清楚，所以我尝试过的就是我想象的可能是正确的。不幸的是，事实并非如此，这就是我在这里的原因:)

【问题讨论】：

标签： css sass webpack

【解决方案1】：

只是快速浏览您的问题。会不会是错字。请注意这一行

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

登陆而不是登陆？深夜编码哈哈？

【讨论】：