Webpack 2 - 解析node_module的问题

Question

我是用mocha-webpack v1.0.1，节点v6.10进行单元测试的。但是，我从我们的一个节点模块收到错误，其中webpack无法解析@。这是我们使用的内部库，可以在另一个开发环境中正常运行。所以，我很困惑为什么会发生这种情况，因为你会认为你的node_module中的一个库会有点自我维持并且知道如何解析自己（并且被验证为在另一个环境中工作）。

Error in ./~/abc-components/src/abc-theme/index.scss

  Module parse failed: /path/to/app/node_modules/abc-components/src/abc-theme/index.scss Unexpected character '@' (1:0)
  You may need an appropriate loader to handle this file type.
  | @charset "UTF-8";
  | @import "abc-variables";
  | @import "alert";

我相信@是我们用来解析该库中模块路径的别名。我在这个tutorial之后模拟了我的设置。来自package.json：

"unit": "BABEL_ENV=test mocha-webpack --webpack-config build/webpack.test.conf.js --require test/unit/.setup src/**/*.spec.js --recursive --watch"

从build/webpack.test.conf.js配置，包括我尝试过的一些评论：

var path = require('path')
var webpack = require('webpack')
var utils = require('./utils')
var config = require('../config')
// var nodeExternals = require('webpack-node-externals');

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  resolve: {
    modules: [path.resolve('./src'), "node_modules"],
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  // externals: [nodeExternals()],
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  // plugins: [
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: "vendor",
    //   filename: "vendor.js",
    //   minChunks: function (module) {
    //     // This prevents stylesheet resources with the .css or .scss extension
    //     // from being moved from their original chunk to the vendor chunk
    //     if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
    //       return false;
    //     }
    //     return module.context && module.context.indexOf("node_modules") !== -1;
    //   }
    // }),
  //   new webpack.DefinePlugin({
  //     'process.env': require('../config/test.env')
  //   })
  // ],
  module: {
    loaders: [
      {
        test: /\.(js|vue)$/,
        // loader: 'eslint-loader',
        // enforce: 'pre',
        include: [resolve('src'), resolve('test'), resolve('node_modules')],
        /* options: {
          formatter: require('eslint-friendly-formatter')
        } */
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
        // options: vueLoaderConfig
      },
      {
        test: /\.ts$/,
        loader: "awesome-typescript-loader",
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [resolve('src'), resolve('test')]
        // exclude: /node_modules/
      },
      {
        test: /\.(mp3|wav)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('audio/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  resolveLoader: {
    alias: {
      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 
      // see discussion at https://github.com/vuejs/vue-loader/issues/724
      'scss-loader': 'sass-loader'
    }
  }
}

Answer 1

在loader中包含以下配置。

module: {
loaders: [
    {
        test: /\.(scss|sass)$/i,
        include: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'path/to/imported/file/dir'), <== This solved the issue
        ],
        loaders: ["css", "sass"]
    },
]

},