導入HTML用的WebPack

我試圖導入HTML到使用的WebPack在打字稿的變量。導入HTML用的WebPack

這裏是我的設置：

的package.json：

{ 
    "devDependencies": { 
    "awesome-typescript-loader": "^3.2.3", 
    "html-loader": "^0.5.1", 
    "ts-loader": "^2.3.7", 
    "typescript": "^2.5.3", 
    "webpack": "^3.6.0" 
    } 
}

webpack.config.js：

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname), 
    entry: './main', 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'app.js' 
    }, 
    resolve: { 
    // Add '.ts' and '.tsx' as resolvable extensions. 
    extensions: [".ts", ".js"], 
    modules: [ 
     "node_modules", 
     path.join(__dirname, 'app'), 
    ], 
    }, 
    module: { 
    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.html$/, 
     loader: 'html-loader', 
     }, 
     // Faster alternative to ts-loader 
     { 
     test: /\.tsx?$/, 
     loader: 'awesome-typescript-loader', 
     options: { 
      configFileName: 'tsconfig.json', 
     }, 
     exclude: /(node_modules)/, 
     }, 
    ], 
    }, 
};

main.ts：

import template from './template.html'; 
console.log(template);

模板。 HTML：

<p>Hello World !</p>

當我試圖用的WebPack編譯：

$ ./node_modules/.bin/webpack 

[at-loader] Using [email protected] from typescript and "tsconfig.json" from /tmp/test/tsconfig.json. 


[at-loader] Checking started in a separate process... 

[at-loader] Checking finished with 1 errors 
Hash: d06d08edc313f90c0533 
Version: webpack 3.6.0 
Time: 2194ms 
Asset  Size Chunks    Chunk Names 
app.js 2.72 kB  0 [emitted] main 
    [0] ./main.ts 136 bytes {0} [built] 
    [1] ./template.html 40 bytes {0} [built] 

ERROR in [at-loader] ./main.ts:1:22 
    TS2307: Cannot find module './template.html'.

我一直在這半天，所以你可以肯定template.html是它應該是。

從我從webpack配置中瞭解到，html-loader應該首先處理文件，所以它應該將html文件的內容加載到變量中。至少，這個使用ES6工作...

任何人都可以電話我如何加載HTML與的WebPack /打字稿變量？或者至少我的方法出了什麼問題。

來源

2017-09-30 Luke Skywalker

如果你曾經能夠解決這個問題？ –

請參閱下面的mamacdon的答案。我缺乏的是html擴展的模塊定義。 –

一個簡單的方法就是堅持使用CommonJS的「規定」加載非打字稿資產時：

const template = require('./template.html');

如果你喜歡使用import保持，它可以配置打字稿編譯器加載文件作爲一個字符串。下面的方法在TypeScript 2.4.2下爲我工作。

此塊添加到項目的類型聲明文件（我稱之爲typings.d.ts）：

// typings.d.ts 
declare module '*.html' { 
    const content: string; 
    export default content; 
}

您現在應該能夠導入HTML文件是這樣的：

// main.ts 
import template from './template.html'; 
console.log(template); // <p>Hello world !</p>

全面披露：我項目使用了不同的裝載機（見下文）。

// webpack.config.js 
config.module = { 
    rules: [ 
    { 
     test: /\.ts$/, 
     loader: '@ngtools/webpack' 
    }, 
    { 
     test: /\.html$/, 
     use: 'raw-loader' 
    } 
    ] 
}

有一個Github上線here有其他解決方案進行了討論。

來源

2017-12-07 23:00:57 mamacdon

導入HTML用的WebPack

回答

相關問題