目的

Question

目的

我的目标是创建 Webpack 的捆绑包， SystemJS 可以像 Angular 2 那样使用。例如，像 Angular 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 config

'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的定义。）

将Webpack捆绑包与SystemJS一起使用

目的

我的情况

Webpack config

1 个答案: