如果我想构建用 Typescript 编写的 angular2 项目,但我不想将所有项目打包成一个包怎么办?我想将 vendor 捆绑到 vendor.bundle.js 中,其他内容与项目结构保持相同的形状。
基本结构:
app/
main-module/
main-module.ts
main-module.html
main-module.css
page-module/
page-module.ts
page-module.html
page-module.css
main.ts
vendor.ts
我们想要的结构:
app/
main-module/
main-module.js
main-module.html
main-module.css
page-module/
page-module.js
page-module.html
page-module.css
main.js
vendor.bundle.js
我们在 index.html 中做
<script src="vendor.bundle.js"></script>
<script src="main-module.js"></script>
<script src="page-module.js"></script>
我的 webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname + '/app',
entry: {
'vendor': './vendor',
'main': './main'
},
stats: {
colors: true,
reasons: true
},
output: {
path: path.join(__dirname, '/js'),
publicPath: 'js/',
filename: '[name].bundle.js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.ts', '.js'],
modulesDirectories: ['node_modules']
},
module: {
loaders: [
{
test: /\.ts$/, loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
// exclude: [helpers.root('src/index.html')]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor']
})
]
};
最佳答案
Webpack 需要入口点,没有入口点会抛出错误。如果你只想编译你的 ts 文件那么你不需要 webpack pr systemjs 你可以简单地使用 typescript 编译器并且你将保持相同的文件结构。 Webpack 远不止于此。
什么是webpack
webpack 是一个模块打包器。
webpack 获取具有依赖关系的模块并生成代表这些模块的静态 Assets 。
NOTE:- If you want a dist folder with sam file structure but without ts files then you may use tools like gulp for this approach.
希望对你有所帮助。快乐编码
关于angular - 使用 Webpack 将 Angular2 应用拆分成 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39193313/