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