在 webpack.config.js 中包含加载器时出错

Posted 2023-04-13

【中文标题】在 webpack.config.js 中包含加载器时出错

【英文标题】：Error with including loaders in webpack.config.js

【发布时间】：2018-07-15 08:00:01

【问题描述】：

我正在尝试将第三方 Angular 组件集成到 Ionic 3 演示应用程序中。

这个 Angular 组件内部包含 html、CSS 和 SCSS，所以我修改了我的 webpack.config.js 以包含加载器。

这给我带来了两个问题：

“对象原型只能是对象或空：未定义” Sass 错误：找不到或无法读取要导入的文件：~bootstrap/scss/mixins

我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

var optimizedProdLoaders = [
  
    test: /\.json$/,
    loader: 'json-loader'
  ,
  
    test: /\.js$/,
    loader: [
      
        loader: process.env.IONIC_CACHE_LOADER
      ,

      
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: 
          sourceMap: true
        
      ,
    ]
  ,
  
    test: /\.ts$/,
    loader: [
      
        loader: process.env.IONIC_CACHE_LOADER
      ,

      
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: 
          sourceMap: true
        
      ,

      
        loader: process.env.IONIC_WEBPACK_LOADER
      
    ]
  
];

function getProdLoaders() 
  if (process.env.IONIC_OPTIMIZE_JS === 'true') 
    return optimizedProdLoaders;
  
  return devConfig.module.loaders;


var devConfig = 
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: 
    path: 'BUILD',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  ,
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: 
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  ,

  module: 
    loaders: [
      
        test: /\.json$/,
        loader: 'json-loader'
      ,
      
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      ,
      
        test: /\.css$/,
        loader: 'css-loader'
      ,
      
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
          
            loader: 'sass-resources-loader',
            options: 
              resources: 'node_modules/@plentymarkets/terra-components/app/assets/styles/_variables.scss'
            
          
        ]
      ,
      
        test: /\.html$/,
        loader: 'html-loader'
      
    ]
  ,

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: 
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  
;

var prodConfig = 
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: 
    path: 'BUILD',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  ,
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: 
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  ,

  module: 
    loaders: getProdLoaders()
  ,

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new ModuleConcatPlugin(),
    new PurifyPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: 
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  
;


module.exports = 
  dev: devConfig,
  prod: prodConfig

我的 webpack.config.js 中的加载器有什么问题吗？

如果有请告诉我。

提前致谢。

【问题讨论】：

在不查看配置文件的情况下如何帮助您？

对不起，我忘了放我的代码。用代码更新问题。

【参考方案1】：

“问题对象原型可能只是一个对象或 null：未定义”与未使用兼容的 Angular 版本有关，您可能正在使用具有 Angular 版本 5 的 terra 组件。将 Angular 版本降级为 4 并检查错误是否仍然存在。

另一个问题“Sass 错误：找不到或无法读取要导入的文件：~bootstrap/scss/mixins”与 sass-loader 有关。 sass-loader 通常会检测 ~ 并在节点模块中搜索相同的内容。在这种情况下，sass-loader 无法识别它并抛出错误。将 ~ 更改为 node_modules 并检查错误是否仍然存在。有关此问题的更多信息，请查看https://github.com/webpack-contrib/sass-loader

【讨论】：

谢谢，我可以修复它们。根据您的 cmets，我已将 Angular 版本降级为 4，并将 ~ 替换为 node_modules/。我现在可以成功运行应用了。