webpack val 加载程序导致异常

Question

我正在尝试在 webpack 编译时动态包含一个 .js 文件。

我不想使用上下文来加载环境变量，因为我的代码中没有这些魔法变量。

我想要做的是使用 val 加载器来执行一个模块。使用环境变量来决定要导入的模块。并导出该模块。

但是，这会导致其他加载程序抛出错误。

这是我的目录布局

--base
  --src
    app.js
    test.js
  webpack.config.js
  rawr.js

这是我的 webpack.config.js 文件

var path = require('path');
var webpack = require('webpack');
// var process = require('process');

var env = require(process.env.NODE_ENV || './devConf.js');

module.exports = {
    // Specify logical root of the sourcecode
    plugins: [
        new webpack.DefinePlugin(env)
    ],
    context: path.join(__dirname, '/src'),
    entry: {
    app: ['bootstrap.js'],
  },

    // Specify where to put the results
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'build.js'
    },

    // Specify logical root of package imports so as to avoid relative path everywhere
    resolve: {
        root: path.join(__dirname, '/src'),
        // What files we want to be able to import
        extensions: ['', '.js', '.css', '.less'],
    },

    module: {
        preLoaders: [
            // Lint all js before compiling
            /*{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader'
            }*/
        ],
        loaders: [
            {
                test: /\.js$/,
                query: {
                    presets: ['es2015']
                },
                exclude: /node_modules/,
                loader: 'babel'
            },
            {
                test: /\.tpl\.html$/,
                exclude: /node_modules/,
                loader: 'ngtemplate?relativeTo=/src/!html'
            },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.css$/,
        loaders: ["style", "css"]
      }
        ]
    },

    // Dev server settings
    devServer: {
        contentBase: path.join(__dirname, '/dist'),
        noInfo: false,
        hot: true
    },

    // ESLint config
    eslint: {
        configFile: path.join(__dirname, '.eslintrc')
    }
};

我的 js 文件是这样的

// app.js
let b = require('val!test.js');

// test.js
var process = require('process');
loadedModule = require(process.env.NODE_ENV) // NODE_ENV='./rawr.js'
export const myString = loadedModule

// rawr.js
module.exports.test = "hello world";

我得到的异常：

ERROR in ./src/app/app.js
Module parse failed: /home/smaug/Projects/angular-template/node_modules/babel-loader/index.js?{"presets":["es2015"]}!/home/smaug/Projects/angular-template/src/app/app.js Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| 'use strict';
| 
| require('angular-animate');
 @ ./src/bootstrap.js 7:0-18

这与我正在尝试做的事情无关。但如果我删除 require('val!...') 语句，它就会消失。

有什么想法吗？

更新：

如果我将 require 语句更改为

let b = require('val!./test.js');

我收到以下错误：

ERROR in ./~/val-loader!./src/app/test.js
Module build failed: Error: Final loader didn't return a Buffer or String
    at DependenciesBlock.onModuleBuild (/home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
    at nextLoader (/home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at Object.context.callback (/home/smaug/Projects/angular-template/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.module.exports (/home/

Answer 1

// app.js
let b = require('val!./test.js');

Answer 2

这是一个非常令人困惑的错误消息..

检查以下事故..

1. import 语句正指向确切的文件；
2. import 语句文件名中的错字；导入 不存在的模块。

3. 检查你是否安装了所有 装载机喜欢

   css-loader node-sass resolve-url-loader sass-loader\ 样式加载器 url-loader

4.import语句为空

例如：

import * from '';

5.Services 和 Providers 什么都不返回也可能会导致这个错误。

Answer 3

test.js 应该返回一个字符串，其中包含应该提供给需要它的模块的代码。因此，对于您的示例，test.js 应该从此开始

var process = require('process');
loadedModule = require(process.env.NODE_ENV) // NODE_ENV='./rawr.js'
export const myString = loadedModule

到这里

var process = require('process')
loadedModule = require('raw-loader!' + process.env.NODE_ENV)
export const myString = loadedModule

使用“raw-loader”，您将从 rawr.js 获取文本代码，而不是 rawr.js 导出的值。 “val-loader”然后会将 rawr.js 的代码提供给 app.js 中的 require，它会加载该文本，就好像它是您尝试加载的文件的文本一样。

这可能是一个糟糕的解释，但请记住，当您使用val-loader 时，您需要返回一个包含代码的字符串。