Webpack 配置(静态文件)
Webpack Config (static files)
我正在尝试配置项目的构建结构,并希望通过 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 了解不多,我希望采用的方法可能不是建议的路线,所以我愿意改造整个结构。
如果您有权访问 my egghead series, I recommend you look at requiring templates。
如果没有,请查看 this directive。不再需要 templateUrl
,只需要模板并将其作为字符串内联。
我正在尝试配置项目的构建结构,并希望通过 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 了解不多,我希望采用的方法可能不是建议的路线,所以我愿意改造整个结构。
如果您有权访问 my egghead series, I recommend you look at requiring templates。
如果没有,请查看 this directive。不再需要 templateUrl
,只需要模板并将其作为字符串内联。