Webpack Config (static files)

Question

I am trying to configure a project's build structure and would like to do it all via webpack. My project consists of TypeScript (not important for this question), raw CSS, HTML templates (angular) and an index.html

The current structure of the project is:

- app
-- components
--- foo
---- foo.html
---- foo.css
---- foo-ctrl.ts
---- foo-directive.ts
--- bar
---- bar.html
---- bar.css
---- bar-ctrl.ts
---- bar-directive.ts
-- index.html
-- site.css
- dist
- package.json
- webpack.config.js

The desired output would be (under dist)

- js
-- bundle.js // or some other name
- views
-- foo.html // or foo/foo.html
-- bar.html // or bar/bar.html
- styles
-- foo.css // or foo/foo.css
-- bar.css // or bar/bar.css
-- sites.css
- index.html

I have tried using raw-loader and file-loader to no avail to move the html files.

I am happy with how webpack is bundling up the ts/js files, but cannot figure out how to move the static files (html/css). Below is what I have thus far.

// webpack.config.js
module.exports = {
  entry: [
    './app/app.ts',
    './app/index.html',
    './app/foo/foo.html',
    './app/bar/bar.html'
  ],
  output: {
    path: './dist/',
    filename: 'js/bundle.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' },
      { test: /\index.html$/, loader: 'file-loader?name=[name].[ext]' },
      { test: /(?:[^index.html]*).html/, loader: 'file-loader?name=views/[name].[ext]' }
    ]
  }
};

NOTE: I know that I don't know a lot about webpack and the approach I am looking to take may not be the suggested route, so I am open to revamping the entire structure.

Answer 1

If you have access to my egghead series, I recommend you look at requiring templates.

If not, then check out this directive. No more need for templateUrl, just require the template and it gets inlined as a string.