使用Webpack構建用於NPM包的Angular 2

Question

我有一個組件集合&在Angular 2中構建的服務。目前，它們將通過gulp捆綁並打包到dist文件夾，然後發佈到私有npm服務器上。如果可能的話，我想要停止使用Gulp。

我的問題是，我可以只使用的WebPack捆綁，縮小，等我的文件到dist文件夾。以及有能力在他們中運行我的茉莉花測試？我有麻煩

起步。我有一個index.ts文件，該文件導出每個組件文件夾中的所有文件以及主模塊。這是否成爲我的webpack配置的入口？

Answer 1

是 - 具有所有其他文件作爲依賴文件 - 是入門的好人選，你也可以有一個以上的文件作爲進入verdor分裂/自己的代碼以JS分開，這裏的例子配置（假設你可以使用webpack2）：2的WebPack配置

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是一個模塊捆綁的

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

這是工作的版本。它與任務跑步者無關，儘管在許多情況下可以替代吞嚥或咕嚕聲的需要。

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

因此，要回答你的問題：

1）是的，它可以被用於捆綁/縮小/等&輸出到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 
]} 

希望這有助於:)