详解基于Vue2.0项目的webpack配置文件

{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate",
    "build-test": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=test",
    "build-release": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=release"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "clean-webpack-plugin": "^0.1.15",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.2.3",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-cookie": "^1.1.3",
    "vue-loader": "^11.0.0",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.0",
    "vue-style-loader": "^2.0.3",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

{
  "presets": [
    ["latest", {
      "es2015": { "modules": false }
    }]
  ]
}

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var srcPath = path.join(__dirname, './src/');

/*-----------------根据process变量找到对应的webconfig文件-----------------*/
function getEnv() {
    var argv = process.argv.slice(2);
    for (var i = 0; i < argv.length; i++) {
        if (argv[i].indexOf('--env=') >= 0) {
            return argv[i].substr(6);
        }
    }
}
//webconfig是api配置文件。一般来说，不同的环境后台api地址会不同
//例如：test环境下，api为http://test.api.com; 
//release环境下，api为http://release.api.com; 
//需要根据不同的环境，把api配置给相应的ajax插件，如vue-resource, axios
//例如，配置vue-resource: Vue.http.options.root = webconfig.host;
var env = getEnv();
var configPath = '';
switch (env) {
    case 'test' :
        configPath = path.join(__dirname, './src/config/webconfig_test.js');
        break;
    default :
        configPath = path.join(__dirname, './src/config/webconfig_release.js');
}
/*-----------------webpack 配置-----------------*/
module.exports = {
    //完整写法为entry:{main:  './src/main.js'}，所以，[name]默认为"main"
    //也可以按照喜好自行定义[name]的名字
    entry: './src/main.js',
    output: {
        //必须是绝对路径（所以这里用到的是path.resolve，而不是path.join）
        //指定文件打包的输入目录
        path: path.resolve(__dirname, './dist'),
        //output.path中的URL以HTML页面为基准，表示资源的发布地址
        //当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换
        // webpack-dev-server也会默认从publicPath为基准，使用它来决定在哪个目录下启用服务，来访问webpack输出的文件。
        publicPath: '/',
        // 指定输出文件的名称，[hash]会自动给文件名加上hash后缀
        filename: 'js/build-[hash].js',
        //异步加载的JS文件不会被打包到output->path下，所以需要为其做专门配置
        //[id]会自动为异步文件添加序列号
        //这里，和vue-router配合，实现切换路由时按需加载JS文件
        chunkFilename: 'js/[id].build.js?[chunkhash]'
    },
    //注意：利用ExtractTextPlugin插件将css或者scss(require("style.css"))单独打包到一个CSS文件
    //这样，样式不会内联到JS里面
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader'
                })
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/,
                loader: 'file-loader',
                options: {
                    //图片导出路径
                    name: 'images/[name].[ext]'
                }
            }
        ]
    },
    resolve: {
        //模块别名定义，方便后续直接引用别名
        //例如，引用webconfig模块，语法为: require('webconfig')
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            appCss: srcPath + 'sass/app.scss',
            favicon: srcPath + 'images/favicon.ico',
            webconfig: configPath,
            apiconfig: srcPath + 'config/apiconfig.js'
        }
    },
    //webpack-dev-server配置
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        //指定服务器文件路径
        contentBase: "./dist",
        port: 9002
    },
    performance: {
        //不展示警告或错误提示
        hints: false
    },
    //选择一种source map来增强调试过程，该选项会影响构建和重构建的速度
    devtool: '#eval-source-map',
    plugins: [
        //定义全局插件，不需要require()引入，直接可以使用模块名，如：webconfig.host;
        new webpack.ProvidePlugin({
            webconfig: 'webconfig',
            API_CONFIG_URL: "apiconfig",
        }),
        // 依据一个简单的模板，帮你生成最终的Html5文件
        // 这个文件中自动引用了你打包后的JS文件。
        // 每次编译都在文件名中插入一个不同的哈希值
        new HtmlWebpackPlugin({
            template: __dirname + "/index.tpl.html",
            favicon: 'src/images/favicon.ico',
        }),
        //将CSS从JS文件中分离出来，并添加到输出html文件中
        new ExtractTextPlugin('css/' + '[name]-[hash].css'),
        //每次build时，先清除dist包
        new CleanWebpackPlugin(['dist'], {
            verbose: true,
            dry: false
        })
    ]
};
//生成环境下的配置，提供文件压缩功能
if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate"
  }