Webpack配置（静态文件）

Question

Webpack配置（静态文件）

5

我希望通过webpack来配置项目的构建结构。我的项目包括TypeScript（对于这个问题不重要），原始的CSS，HTML模板（Angular）和一个index.html。

目前项目的结构如下：

- 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

期望的输出结果将会是（在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

我尝试使用raw-loader和file-loader来移动html文件，但都没有成功。

虽然webpack已经很好地打包了ts/js文件，但是我无法搞定如何移动静态文件(html/css)。以下是我目前的代码：

// 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]' }
    ]
  }
};

注意：我知道自己对webpack的了解不够，而且我想采取的方法可能不是建议的路线，因此我愿意重新构建整个结构。

- Brocco

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kentcdodds · Accepted Answer

如果您可以访问我的egghead系列，我建议您查看需要模板。

如果不能，则请查看此指令。不再需要templateUrl，只需要求模板并将其作为字符串内联即可。