2

I try to load my index.html file via the file-loader and Webpack 3.

My webpack.config.tslooks like this:

import * as webpack from 'webpack';

const config: webpack.Configuration = {
    entry: "./src/app.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    devtool: "source-map",

    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".html"]
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            }, {
                test: /\.html$/,
                loader: "file-loader"
            }
        ]
    }
};

export default config;

Unfortunately it doesn't load my src/index.html file to the dist folder. What am I doing wrong? How can I get the index file from the src folder to the dist folder?

Robin
  • 8,162
  • 7
  • 56
  • 101
  • Did you import that index.html somewhere in your modules? Webpack will only load files that is imported somewhere in the file-tree beneath the entry-point. So a 'import ./index.html'; on the top of your app.tsx file will probably trigger the file-loader – thsorens Jul 05 '17 at 21:37
  • Oh, that's a nice piece of information @thsorens. How can I do that in Typescript, so the ts-compiler agrees with it? – Robin Jul 05 '17 at 21:39
  • I havent really tried typescript with webpack before, only tried most other js/css/sass and so on. But i would think that since this import i used as an example doesnt try to import it into any variable, then why would typescript complain about it lacking any types? I would think that import Test from './index.html' would blow up in TS, but import './index.html'; should be fine? – thsorens Jul 05 '17 at 21:43
  • https://github.com/Microsoft/TypeScript/issues/2709 There you can see in the first comment that it should work;) – thsorens Jul 05 '17 at 21:47

1 Answers1

2

You can use html-webpack-plugin.

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}
Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44
  • Thank you for your answer. Why do I need to use another package? Is `file-loader`not explicitly made for this? – Robin Jul 06 '17 at 11:10
  • @Robin I have edited. Loader was optional. It did nothing because html file isn't imported in entry. it's path in template – Stanislav Mayorov Jul 06 '17 at 21:09