所以我想用webpack做一个非常简单的任务.

我有一些静态HTML模板,例如

的test.html

<div><span>template content</span></div>

而我想要做的就是在模板中返回字符串,例如

require("raw!./test.html")

应该返回一个字符串,如:

"<div><span>template content</span></div>"

但相反,它返回以下字符串

"modules.exports = <div><span>template content</span></div>"

我尝试了几个模块,比如raw-loader和html-loader.并且它们都表现出相同的方式.所以我看了一下源代码,只是为了发现它支持这种方式.

那么,如果我只是想要原始HTML,那么我对此的期望是什么？删除前置的"module.exports ="字符串是不好的做法？从bundle编辑:删除'modules.export ='部分结果在bundle中什么都不返回:/

我的配置

module.exports =
{
    module:
    {
        loaders:
            [
                { test: /\.html$/, loader: "raw-loader" }
            ]
    }
};

发生了什么

我刚刚升级了 gatsby 2 -> 3。

在幕后，它现在使用 webpack 5 而不是 4，并且现在给出了一个突出的依赖项警告，我只是无法摆脱 -raw-loader作为主项目和 gatsby 的依赖项安装，即使它是相同的版本。

我尝试在 my 中指定纱线分辨率package.json，如下所示：

  "resolutions": {\n    "raw-loader": "4.0.2"\n  },\n

但这似乎没有任何作用。我也尝试过：

  "resolutions": {\n    "gatsby/raw-loader": "4.0.2"\n  },\n

完整输出

\xe2\xa0\x99 Caching HTML renderer compilation\n<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving \'raw-loader/dist/cjs\' in /Users/myname/source/octue/planex-site/node_modules/gatsby/node_modules/loader-runner/lib for build dependencies doesn\'t lead to expected result \'/Users/myname/source/octue/planex-site/node_modules/raw-loader/dist/cjs.js\', but to \'/Users/myname/source/octue/planex-site/node_modules/gatsby/node_modules/raw-loader/dist/cjs.js\' instead. Resolving dependencies are ignored for this path.\n<w>  at unknown 4 raw-loader/dist/cjs\n<w>  at file …

使用webpack ^v2.2.1,我想将TypeScript模块作为文本导入,此外还要"正常"导入相同的模块.

我想我应该使用raw-loader.但它没有成功.

一些示例代码:

import DemoComponent from './demo'
import demoCode from 'raw-loader!./demo'

TypeScript正在尖叫着我

error TS2307: Cannot find module 'raw-loader!./demo'.

我正在使用ts-loader.

这是我的webpack.config.js:

const { resolve } = require('path')
const fail = require('webpack-fail-plugin')

const config = {
  entry: './docs/index.ts',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'docs-build')
  },
  resolve: {
    extensions: [ '.ts', '.js' ]
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }, …

我正在尝试通过以下方式包含一些 WebGL 顶点和片段着色器import字符串来包含它们。

我有一个这样的项目结构：

myproj/\n  src/\n    shad/\n      foo.frg\n      foo.vtx\n    shad.d.ts\n    Foo.ts\n  dist/\n    ...\n  built/\n    ...\n  tsconfig.json\n  package.json\n  webpack.config.js\n

鲥鱼

declare module \'*.vtx\' {\n    const content: string;\n    export default content;\n}\n\ndeclare module \'*.frg\' {\n    const content: string;\n    export default content;\n}\n

脚

import stuff from \'shad/foo.frg\'\n\nconsole.log(stuff)\n

tsconfig.json

{\n    "include": [\n        "src/**/*", \n        "src/shad/**/*.vtx", \n        "src/shad/**/*.frg",\n    ], \n    "exclude": ["node_modules"],\n    "compilerOptions": {\n        "target": "ES2018",\n        "module": "es2015",\n        "declaration": true,\n        "sourceMap": true,\n        "outDir": "built",\n        "composite": true,\n …

在我的有角项目中，如果我们使用该应用程序，则可以编译并使用raw-loader@1.0.0。而如果我们使用version 2.0.0，则应用程序将无法运行。1.0.0和2.0.0版本之间有什么区别？

webpack.config.ts

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader', 'angular2-template-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.(html|css)$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.DefinePlugin({
            config: JSON.stringify({
                apiUrl: 'http://localhost:9999'
            })
        })
    ],
    devServer: {
        historyApiFallback: true
    }
};

我正在尝试将 ES6 与 webpack 一起使用。javascript 模块导入/导出没问题，但我无法让 raw-loader 工作。

这是我打算在源文件中执行的操作

import template from './template.html'

template.html 文件中包含原始 HTML。

module.exports = {
  context: __dirname,
  entry: [
    'babel-polyfill',
    './app/app.js',
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        include: __dirname + '/app/',
        loader: 'eslint-loader',
      },
    ],
    loaders: [
      {
        test: /\.js$/,
        include: __dirname + '/app/',
        loader: 'babel-loader?presets[]=es2015',
      },
      {
        test: /\.html$/,
        include: __dirname + '/app/',
        loader: 'raw-loader',
      },
    ],
  },
  output: {
    path: './build/',
    filename: 'app.js',
  },
};

当我启动 webpack 时，代码是这样生成的：

  module.exports = "module.exports = …

我想使用 raw-loader 将 .js 文件作为字符串导入，但是 .js 文件是用 ES6 模块编写的，我想在通过 raw-loader 导入之前用 babel 和 webpack 编译和捆绑文件。

在我的代码中，我想使用：

import SomeScriptsString from '!raw-loader!./my-module-file.js'

// use SomeScriptsString as a string

任何人都可以帮忙吗？

我真的希望我能够使用 webpack 加载包含使用raw-loader. 不幸的是，它-在第一行的's处失败 ：-----BEGIN CERTIFICATE-----。
作为测试，我删除了第一个-----，然后它在“”（空格）字符处失败。

似乎比使用fs和回调更简单的解决方案。

为了澄清，我希望能够做到这一点：

import caCert from './cacert';

我目前陷入困境,我需要在HTTPS模式下启动NodeJS服务器并需要读取cert文件,以便在https.createServer(options, app).listen(8443)命令中将它们作为选项.我很难掌握如何将文件读入使用Webpack 2捆绑的TypeScript文件中.例如,

我有2个文件file.crt和file.key.我想在创建https服务器并开始侦听给定端口时读取这些文件.在常规的TS/JS土地上,我可以这样做:

```

import Config from '../env/config';
import Express from '../lib/express';
import * as https from 'https';

import * as fs from 'fs';

let config = new Config();
let app = Express.bootstrap().app;

export default class AppService{

  constructor(){
    // console.log('blah:', fs.readFileSync('./file.txt'));
  }

  start(){

    let options = {
      key: fs.readFileSync('file.key'),
      cert: fs.readFileSync('file.crt'),
      ca: fs.readFileSync('ca.crt'),
      passphrase: 'gulp'
    };

    https.createServer(options, app).listen(config.port,()=>{
      console.log('listening on port::', config.port );
    });

  }
}

但是,当webpack 2构建捆绑包时,这些文件不会被引入,因此当节点启动时它无法找到它们.好吧,我明白了,但我读到原始加载器会为此工作,所以我想我会尝试一下.

这是我的webpack配置文件:

// `CheckerPlugin` is optional. Use it if you …