使用Webpack为NPM包构建Angular 2

Question

I have a collection of components & services built in Angular 2. Currently they are being bundled and packaged via gulp to a dist folder that is then published on a private npm server. I want to, if possible, stop using Gulp.

My question is, can I use just Webpack to bundle, minify, etc my files to the dist folder. As well as have the ability to run my jasmine tests in them?

I am having trouble getting started. I have a index.ts file that series of exports of all files from each components folder, as well as the main module. Does that become the entry of my webpack config?

Answer 1

Yes - the file that has all other files as dependencies - is a good candidate for entry, you can also have more that one file as entry to split verdor/your own code to separate js, here the example config (assuming you would use webpack2):

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

This is working version of 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 is a module bundler. It has nothing to do with a tasks runner, although in many cases can substitute the need of gulp or grunt.

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

So to answer your questions:

1.) Yes, it can be used to bundle/minify/etc & output to a dist folder.

2.) Running jasmine tests? Webpack doesn't really play a part here. You will likely use an npm script to execute tests directly using the jasmine CLI. Unit tests should likely be run on small separate components, not the bundled application as a whole. A decent tutorial here: https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine

Answer 3

Yes you definitely can do these things. In webpack, you would have to specify an entry point.

First, you need to create a file called webpack.config.js in the root of your project. This is going to be your config file which webpack will try to look into by default.

It looks like this:

Note: This is a webpack 2 implementation

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
]}

Hope this helps :)