Reactjs webpack配置问题

Question

我一直在为reactjs项目工作一段时间。我决定在项目中使用第三方库。

我安装了库并导入它，我可以从node_modules访问这个库。

但我怕这个库无法访问它自己的CSS和SCSS文件，所以我决定webpack配置是在这背后。所以我在这里发布我的webpack conidration文件。

  var path = require("path"); 

      var DIST_DIR = path.resolve(__dirname, "dist"); 
      var SRC_DIR = path.resolve(__dirname, "src"); 

      var config = { 
       entry: SRC_DIR + "/app/index.js", 
       output: { 
        path: DIST_DIR + "/app", 
        filename: "bundle.js", 
        publicPath: "/app/" 
       }, 
       module: { 
        loaders: [ 
         { 
          test: /\.js?/, 
          include: [SRC_DIR], 
          loader: "babel-loader", 
          query: { 
           presets: ["react", "es2015", "stage-2"] 
          } 
         }, 
         { 
          test: /\.s?css$/, 
          include: [SRC_DIR], 

/*  as far as I know directories in here will be searched- 
     for scss and css files and these files will be loaded. 
     I'm not sure if I need to import node modules or add it's path here. 
     Also using sass it throws "unexpected format" from my css files in src path.*/ 
          loaders: ['style', 'css' , 'sass'] 
         } 
        ] 
       } 
      }; 

      module.exports = config; 

需要注意的是：node_modules不是src目录

- 如何能第三方模块访问他们的CSS和SCSS文件？ - 我需要更改此配置吗？

Answer 1

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/app.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "app.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
};