使用webpack打包后，程序启动不起来？

Question

最近在使用gulp+webpack的时候，随着加载的模块越来越多，试着使用webpack进行模块的打包。

因为webpack自带了打包的插件

var uglifyWebpackPlugin = require('webpack/lib/optimize/uglifyJsPlugin');

module.exports = {
      //省略其他的配置文件
    plugins: new uglifyWebpackPlugin({
        compress: {
            warnings: false
        }
    })
};

这样在输出文件的时候就能完成代码的自动压缩。但是在未压缩的代码程序是能跑起来的，但是压缩过后就跑不起来了。特别是对于依赖的文件的引用失效了。

---

这是我的配置文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var uglifyWebpackPlugin =     require('webpack/lib/optimize/uglifyJsPlugin');
var path = require('path');

module.exports = {
    entry: {
        app: ['./src/app.js'],
        vendors: ['angular', 'angular-ui-router', 'oclazyload']
    },
    output: {
        path: __dirname + '/build/js',
        filename: 'bundle.js',
        chunkFilename: "[id].chunk.js",
        publicPath: '/js/'  
    },
    resolve: {
        root: __dirname + '/src/',     
        alias: {
            css: path.join(__dirname, '/build/static/css'), 
            img: path.join(__dirname, '/build/static/css/img'),
            json: path.join(__dirname, '/build/static/json')
        }
    },
    watch: true,
    module: {
        noParse: [],
        loaders: [
            {
                test: /\.js$/, exclude: /node_modules/,
                loader: 'ng-annotate!babel'
            },
            {
                test: /\.html$/,    
                loader: 'raw'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader?limit=8192' 
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),//分离库
        new webpack.ProvidePlugin({     
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery',
            "_": 'underscore'
        }),
        new uglifyWebpackPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};

Answer 1

光这么配置不行的吧... 你还有很多依赖之类的东西需要打包的应该

Answer 2

plugins : [

{your plugin}

]
改成这样试试