Webpack包与SystemJS结合使用

Question

目标

我的目标是创建与Webpack捆绑，可以被SystemJS消费，完全像角2做。例如，像角2的common.umd.js束。

使用Webpack是很重要的！

我的处境

我生产这个包(用Webpack)。

!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var n in o)("object"==typeof exports?exports:t)[n]=o[n]}}(this,function(){return webpackJsonp([0],{0:function(t,e,o){"use strict";function n(t){for(var o in t)e.hasOwnProperty(o)||(e[o]=t[o])}n(o(1)),n(o(22))},1:function(t,e,o){"use strict";var n=this&&this.__decorate||function(t,e,o,n){var r,a=arguments.length,f=a<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)f=Reflect.decorate(t,e,o,n);else for(var c=t.length-1;c>=0;c--)(r=t[c])&&(f=(a<3?r(f):a>3?r(e,o,f):r(e,o))||f);return a>3&&f&&Object.defineProperty(e,o,f),f},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},a=o(2),f=function(){function t(){}return t=n([a.Component({selector:"ax-button",template:o(20),styles:[o(21)]}),r("design:paramtypes",[])],t)}();e.AxButton=f},20:function(t,e){t.exports="<button md-raised-button> <ng-content></ng-content> </button>"},21:function(t,e){t.exports=":host > button[md-raised-button] {\n  background-color: #28b6f6;\n  color: #ffffff;\n  z-index: 5;\n  text-transform: uppercase;\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);\n  will-change: box-shadow; }\n  :host > button[md-raised-button]:hover {\n    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }\n  :host > button[md-raised-button]:focus {\n    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }\n  :host > button[md-raised-button]:active {\n    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); }\n"},22:function(t,e,o){"use strict";var n=this&&this.__decorate||function(t,e,o,n){var r,a=arguments.length,f=a<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)f=Reflect.decorate(t,e,o,n);else for(var c=t.length-1;c>=0;c--)(r=t[c])&&(f=(a<3?r(f):a>3?r(e,o,f):r(e,o))||f);return a>3&&f&&Object.defineProperty(e,o,f),f},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},a=o(2),f=o(23),c=o(25),i=o(1),s=function(){function t(){}return t=n([a.NgModule({imports:[c.CommonModule,f.MaterialModule.forRoot()],exports:[i.AxButton],declarations:[i.AxButton]}),r("design:paramtypes",[])],t)}();e.AxButtonModule=s}})});

但是，当我尝试用SystemJS导入它时，发生了以下错误

Uncaught ReferenceError: webpackJsonp is not defined

Webpack配置

'use strict';

const webpack = require('webpack');
const merge = require('webpack-merge');

let uncompressedPackConfig = {

entry: {
    'vendor': './dist/vendor.js',
    'core': './dist/core/index.js',
    'button': './dist/button/index.js',
    'input': './dist/input/index.js'
},

output: {
    path: './dist',
    filename: '[name]/bundles/[name].umd.js',
    libraryTarget: 'umd'
},

resolve: {
    extensions: ['', '.js']
},

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'angular2-template'
        },
        {
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.css$/,
            loader: 'raw'
        }
    ]
},

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['input', 'button', 'core', 'vendor']
    })
]

};

let minifiedPackConfig = merge(uncompressedPackConfig, {

output: {
    filename: '[name]/bundles/[name].umd.min.js'
},

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false }
    })
]

});

module.exports = [uncompressedPackConfig, minifiedPackConfig];

Answer 1

webpackJsonp是一个函数，当您在webpack包中进行代码分裂时，这个函数是webpack创建的。

出现错误webpackJsonp is not defined是因为定义webpackJsonp的webpack包在使用webpackJsonp之前没有执行。我猜你只是在进口核心包？

我认为解决这个问题的一种方法可能是不进行代码分裂，或者首先导入供应商包(我认为它有webpackJsonp的定义)。