我该怎么做才能通过webpack获取少量输出文件

Question

我的Webpack在一个index.js中编译我的所有项目。我该怎么做才能在＆＃34; index.js＆＃34;中获取javascript代码和＆＃34; style / index.css＆＃34;中的css代码？ 我的webpack.config.js：

`
    var path = require（＆＃39; path＆＃39;）;

module.exports = {
  entry: './entry.js',
  output: {
    filename: 'testApp/www/index.js'
  },  
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      { test: /\.jsx?$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname,` "app"),
        query:
        {
          presets:['react', 'es2015', 'stage-0']
        }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
};

`

Answer 1

您可以使用ExtractTextPlugin

在控制台上运行npm install --save-dev extract-text-webpack-plugin

在你的webpack.config.js

中

module.exports = {
  entry: './entry.js',
  output: {
    filename: 'testApp/www/index.js'
  },  
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      { test: /\.jsx?$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, "app"),
        query:
        {
          presets:['react', 'es2015', 'stage-0']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
      }
    ]
  },
  plugins: [
     new ExtractTextPlugin('style/index.css')
  ],
};