Webpack: importera TypeScript-modul både “normalt” och som rå sträng

Med webpack ^v2.2.1 vill jag importera en TypeScript-modul som text, utöver att importera samma modul "normalt".

Jag har kommit fram till att jag förmodligen borde använda raw-loader. Men det fungerar inte.

Exempel på kod:

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

TypeScript skriker åt mig att något som

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

Jag använder ts-loader.

Här är min 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'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    fail
  ]
}

module.exports = config

Svar #1

Om någon letar efter en lösning på detta svar. Att använda import är det bästa alternativet - det kommer att vara typat och tillåta optimeringar från modulbundlare som Rollup och Webpack 3+ när man outputar import vs require:

Du behöver skapa en raw-loader.d.ts och se till att den inkluderas i din tsconfig.json-fil. Ange följande innehåll:

declare module '!!raw-loader!*' {
  const contents: string
  export = contents
}

tsconfig.json:

{
    "compilerOptions": {
        "types": ["raw-loader.d.ts", "node"]
    }
}

Svar #2

Det verkar som att följande fungerar:

import DemoComponent from './demo'
const demoCode = require('!!raw-loader!./demo')

Men jag är inte säker på hur korrekt detta är. Jag skulle gärna vilja hitta någon dokumentation om ordningen och mekanismen för laddare.

Jag skulle också föredra att vara konsekvent genom att istället använda import-satser. Men TypeScript klagar på det om jag gör en direkt konvertering:

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

Felet är enkelt

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

Relaterade artiklar