I am trying to customize the project assembly structure and would like to do all this through webpack. My project consists of TypeScript (not important for this question), raw CSS, HTML templates (angular) and index.html
Current project structure:
- 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 result will be (with 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 tried using raw-loader and file-loader to move html files.
I am pleased with the way webpack links ts / js files, but cannot figure out how to move static files (html / css). Below I still know.
// 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 know little about the web package, and the approach I am looking for may not be the suggested route, so I am open to updating the whole structure.