我有一组在 Angular 2 中构建的组件和服务。目前，它们通过 gulp 捆绑和打包到 dist 文件夹，然后发布到私有 npm 服务器上。如果可能的话，我想停止使用 Gulp。
我的问题是，我可以只使用 Webpack 将我的文件捆绑、缩小等到 dist 文件夹。还能在其中运行我的 jasmine 测试吗？
我无法开始。我有一个 index.ts 文件，该文件从每个组件文件夹以及主模块中导出所有文件的系列。这会成为我的 webpack 配置的条目吗？
【问题讨论】：
Webpack 是一个模块打包器。它与任务运行器无关，尽管在许多情况下可以替代 gulp 或 grunt 的需要。
http://www.acuriousanimal.com/2015/10/15/webpack-not-another-task-runner-tool.html
所以回答你的问题：
1.) 是的，它可用于捆绑/缩小/等并输出到 dist 文件夹。
2.) 运行 jasmine 测试？ Webpack 在这里并没有真正发挥作用。您可能会使用 npm 脚本 直接使用 jasmine CLI 执行测试。单元测试可能应该在小的单独组件上运行，而不是在整个捆绑的应用程序上运行。一个不错的教程在这里：https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine
【讨论】：
是的，你绝对可以做这些事情。在 webpack 中，您必须指定一个入口点。
首先，您需要在项目的根目录中创建一个名为webpack.config.js 的文件。这将是您的 config 文件，webpack 默认会尝试查看该文件。
看起来像这样：
注意：这是一个 webpack 2 实现
module.exports = {
entry: {
bundle: 'path/to/entry/point' // Note: 'bundle' key will become the name of the bundled file
}
output: {
path: 'build', // the folder you want your bundle.js to be contained
filename: '[name].js' // with [name], webpack will automatically look into your entry point key which is 'bundle' in this case
},
// this will tell webpack what files you want to compile and what loaders you would want to use for each
module: {
rules: [ // from 'loaders' to 'rules'
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['style-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
]}
希望这会有所帮助:)
【讨论】：
是的 - 具有所有其他文件作为依赖项的文件 - 是一个很好的条目候选者，您还可以拥有多个文件作为条目来拆分 verdor/您自己的代码以分隔 js，这里是示例配置（假设您将使用 webpack2):
https://github.com/wkwiatek/angular2-webpack2/blob/master/webpack.config.js
这是 webpack 2 配置的工作版本
module.exports = {
module: {
rules: [
{
// Allows me to
// @Component({
// styles: [require('./styles.scss')]
// })
test: /\.scss$/,
use: [
{ loader: "raw-loader" },
{ loader: "sass-loader" }
]
},
{
// bundle external dependencies to separate file
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
// ts files compilation
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
// Allows me to
// @Component({
// template: require('./template.html')
// })
test: /\.html?$/,
loader: 'html-loader'
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
},
// stuffs for correct font-awesome loading
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
plugins: [
new ExtractTextPlugin("vendor.css"),
new webpack.optimize.OccurrenceOrderPlugin(),
// inject vendor.css and index.js links into index.html
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
// workaround for disable warning about critical dependency
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
conf.paths.src
)
],
devtool: 'source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
resolve: {
extensions: [
'.js',
'.ts'
]
},
// entry point
entry: `./src/index`,
};
【讨论】：