Question

我一直在研究reactjs项目。我决定在项目中使用第三方库。

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

但我担心这个库无法访问它自己的css和scss文件，所以我认为webpack配置就在这背后。所以我在这里发布我的webpack会员文件。

         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 }),
  ],
};

Reactjs webpack配置问题

1 个答案: