2017-02-13 26 views
1

У меня возникли проблемы с настройкой Webpack, чтобы должным образом уменьшить мое приложение. Я создаю отдельный JS-файл, один vendor.js (libraries) и main.js (мое приложение). Я посмотрел и разглядел вокруг своей проблемы и, похоже, не нашел подходящего решения.

webpack.config.jsWebpack + угловой 1.x + gulp + minifying

var webpack = require("webpack"); 
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); 

let vendors = [ 
    'angular', 
    'lodash', 
    'moment', 
    'angular-ui-router', 
    'angular-loading-bar', 
    'angular-filter', 
    'angular-animate' 
]; 

module.exports = { 
    entry: { 
    app: './halo/app.js', 
    vendor: vendors 
    }, 
    output: { 
    filename: './build/main.js' 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     filename:"./build/vendor.js" 
    }), 
    new ngAnnotatePlugin({ 
     add: true 
    }), 
    new webpack.optimize.UglifyJsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 
}; 

Мой вопрос, без минификация, приложение работает отлично. Когда я минимизирую приложение и поставщика, он, похоже, не работает. Я получаю неизвестные ошибки поставщика.
Я читал о mangling, но это, кажется, не исправляет мою проблему (если я не делаю это должным образом). Я также делаю ngInject во всех правильных местах.
Я нашел этот конфигурационный Snippit положить внутрь optimize.UglifyJsPlugin ({})

{ 
    beautify: false, // Don't beautify output 
    comments: false, // Eliminate comments 
    // Compression specific options 
    compress: { 
    warnings: false, 
    drop_console: true 
    }, 
    mangle: { 
    except: ['$'], // Don't mangle $ 
    screw_ie8 : true, // Don't care about IE8 
    keep_fnames: true // Don't mangle function names 
    } 
} 

кто может пролить некоторый свет на этот счет, пожалуйста?

+0

Какие поставщики услуг не работают? Как выглядят ваши контроллеры? – garethb

+0

после отладки какое-то время, контроллеры в порядке, ng-annotate правильно впрыскивает зависимости, но я получаю сообщение об ошибке, что провайдер «a» недоступен. не очень помогает, но я все еще в процессе выяснения этого вопроса –

+0

проблема, похоже, с вариантом mangle. –

ответ

0

Не могу выразить это как комментарии, так как у меня меньше репутации.

Что вы можете сделать, это использовать strict-di, а не ng-annotate. Решите все проблемы, о которых сообщает strict-di, а затем используйте minification with mangling on.

strict-di заставляет вас определять все ваши зависимости в формате массива в коде. read this answer about it

+0

проблема не в том, чтобы впрыскивать зависимости. Webpack правильно вводит зависимости. Я вижу его всякий раз, когда он создает выходной файл js –

+0

, тогда другая проблема в основном будет связана с 'window.angular' будет не определена, проверьте, запускаете ли приложение, а затем вкладку консоли разработчика –