webpack val loader造成异常

我想在webpack编译时动态地包含一个.js文件。webpack val loader造成异常

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

我想要做的是使用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！...'）声明，它就会消失。

任何想法？

UPDATE：

如果我改变需要声明是

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/

来源

2016-02-11 user2734679

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

来源

2016-02-11 22:09:51 topheman

我得到一个diff错误。 ./~/val-loader!./src/app/test.js中的错误模块构建失败：错误：最终加载程序没有返回缓冲区或字符串 – user2734679

这次，加载程序工作？该错误稍后发生？如果是这样，请提供以下错误。 – topheman

我不知道是否晚点。我会在问题中包含错误。 – user2734679

这是一个非常混乱的错误信息..

检查以下事故..

import语句是指向确切的文件;
输入语句上文件名中的输入错误;导入不存在的模块。
检查您是否已经安装了所有装载机像

CSS-装载机节点萨斯决心-URL装载机萨斯装载机\ 风格装载机网址装载机

4.进口报表为空

ex：

import * from '';

5.服务和提供程序不返回任何内容也可能导致此错误。

来源

2016-12-05 08:46:22

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

使用“原始加载器”，您将得到rawr.js而不是RAWR值的文本代码.js出口。然后，“val-loader”会将rawr.js的代码发送到app.js中的require，它将加载该文本，就好像它是您要加载的文件的文本一样。

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

来源

2017-01-06 17:39:48

webpack val loader造成异常

回答

相关问题