Question

我有一系列组件＆amp;在Angular 2中构建的服务。目前它们通过gulp捆绑和打包到dist文件夹，然后在私有npm服务器上发布。如果可能的话，我想停止使用Gulp。

我的问题是，我可以使用Webpack将我的文件捆绑，缩小等文件到dist文件夹。除了能够在其中运行我的茉莉花测试吗？

我无法入门。我有一个index.ts文件，该文件系列从每个组件文件夹以及主模块导出所有文件。这会成为我的webpack配置的输入吗？

Answer 1

是 - 包含所有其他文件作为依赖项的文件 - 是一个很好的入门候选者，你也可以有更多的那个文件作为分割verdor /你自己的代码来分隔js的条目，这里是示例配置（假设你会使用webpack2）：

https://github.com/wkwiatek/angular2-webpack2/blob/master/webpack.config.js

这是webpack 2 config

的工作版本

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`,

};

Answer 2

Webpack是一个模块捆绑器。它与任务运行器无关，尽管在许多情况下可以替代gulp或grunt的需要。

http://www.acuriousanimal.com/2015/10/15/webpack-not-another-task-runner-tool.html

所以回答你的问题：

1。）是的，它可用于捆绑/缩小/ etc＆amp;输出到dist文件夹。

2。）运行茉莉花测试？ Webpack在这里并没有真正发挥作用。您可能会使用 npm脚本直接使用jasmine CLI执行测试。单元测试应该可以在小的独立组件上运行，而不是整个捆绑的应用程序。这是一个不错的教程：https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine

Answer 3

是的，你绝对可以做这些事情。在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
]}

希望这会有所帮助：）

使用Webpack为NPM包构建Angular 2

3 个答案: