mercredi 1 juin 2016

unit tests error - webpackjsonp is not defined - webpack's CommonsChunksPlugin comibned with angular app

first of all id like to point that without codesplitting with commonschunksplugin and with a single entry point the unit tests run well (failing\succeeding).

now, my app has two entry points:
one for the app itself - a require statement to a index.js file that defines my app tree with needed require statements to all files/libraries
the second entry point called vendor and includes all my external libraries
this is my webpack.config.js file:

var path = require('path');
var webpack = require('webpack');
var CommonsPlugin = require("CommonsChunkPlugin")
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var config = {
    entry: {
        index: ['./index.ts'],
        vendor: [
            'es5-shim',
            'es6-shim',
            'lodash',
            'angular',
            'angular-mocks',
            'angular-ui-router',
            'moment',
            'angular-moment',
            'angular-animate',
            'angular-aria',
            'angular-messages',
            'angular-material',
            'angular-material-icons',
            'angular-sanitize',
            'angular-cache',
            'angular-tooltips',
            'angular-jwt',
            'ng-file-upload',
            'ng-csv',
            'ui-select'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[hash].bundle.js',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: [
                'style',
                'css',
                'postcss',
                `sass?includePaths[]=${__dirname}`
                ],
                exclude: /(node_modules)/
            },
            {
                test: /\.css$/,
                loaders: [
                'style',
                'css?importLoaders=1',
                'postcss',
                ],
            },
            {
                test: /\.ts$/,
                loader: 'ng-annotate!ts',
                exclude: /(node_modules)/
            },
            {
                test: /\.js$/,
                loader: 'ng-annotate',
                exclude: /(node_modules)/
            },
            {
                test: /\.json$/,
                loader: 'json',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw'
            },
            {
                test: /\.(woff|woff2|ttf|eot)$/,
                loader: 'file'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file!img?minimize&optimizationLevel=5&progressive=true'
            },
            {
                test: /\.(eot|woff2?|ttf|otf)(\?.*)?$/i,
                loader: 'url?limit=5120&name=[path][name].[hash].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,
                loader: 'url?limit=5120!img?minimize&optimizationLevel=5&progressive=true&name=[path][name].[hash].[ext]'
            },
        ]
    },
    postcss: function () {
        return [
            autoprefixer({ browsers: ['last 5 versions'] })
        ];
    },
    resolve: {
        root: [
            path.resolve(__dirname)
        ],
        extensions: [
            '',
            '.js', 
            '.ts'
        ]
    },
    plugins: [
        new CopyWebpackPlugin([{ from: 'app/assets/images', to: 'app/assets/images' }, { from: 'app/assets/svg', to: 'app/assets/svg' }]),
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js", Infinity),
        new CleanPlugin(['build']),
        new HtmlWebpackPlugin({
            pushState: true,
            filename: 'index.html',
            inject: 'body',
            template: 'index.html_vm',
            favicon: 'app/assets/favicon.ico',
            hash: false
        }),
        new webpack.ProvidePlugin({
            momnent: 'moment'
        })
    ]
};

module.exports = config;

and this is my karma.config.js file:

// Karma configuration
// Generated on Tue Dec 22 2015 13:39:26 GMT+0200 (Jerusalem Standard Time)

var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: http://ift.tt/1ft83uu
        frameworks: ['jasmine'],


        // list of files / patterns to load in the browser - automated in gulpfile.js
        files: [
            './index.ts',
            './app/**/*.spec.js'
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: http://ift.tt/1gyw6MG
        preprocessors: {
            './index.ts': ['webpack'],
            'app/**/*.spec.js': ['webpack'],
            'app/**/*.js': 'coverage'
        },


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: http://ift.tt/1ft83KQ
        reporters: ['progress', 'coverage'],


        // web server port
        port: 9876,

        plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('karma-webpack'),
        ],

        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        autoWatchBatchDelay: 300,

        // start these browsers
        // available browser launchers: http://ift.tt/1ft83KU
        browsers: ['Chrome'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true,


        // Concurrency level
        // how many browser should be started simultanous
        concurrency: Infinity,

        webpack: webpackConfig,

        webpackMiddleware: {
            // webpack-dev-middleware configuration
            // i. e.
            noInfo: true
        }
    });
};

vendor.bundle.js script loads before the app bundle im still getting the webpackjsonp module is undefined error anyone has any ideas? i really wanna split the code into two files

Aucun commentaire:

Enregistrer un commentaire