mobile-scan/webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');
var ExtracTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin');
var webpack = require('webpack');
var path = require('path');

//获得NODE_ENV参数，用于判断处于开发模式还是打包模式
var isDev = process.env.NODE_ENV === 'develement';

var config = {
    //打包入口
    entry: {
        app: path.join(__dirname, 'src/app.js'),
        vendor: ['vue','vue-router','mint-ui'],
    },
    output: {
        path: path.join(__dirname, 'www'), //输出路径
        filename: '[name]-[chunkhash:8].js' //输出文件名，相对于输出路径
    },
    //loader用于将非js文件转换为有效模块
    module: {
        rules: [
            {
                test: /\.(jpeg|jpg|png|gif|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: './img/[chunkhash]-[name].[ext]'
                    }
                }]
            },
            {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                }]
            },
            {
                test: /\.(htm|html)$/,
                use: [{
                    loader: 'html-withimg-loader',
                }]
            },
            {
                test: /\.scss/,
                use: ExtracTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'sass-loader'
                    }]
                })
            },
            {
                test: /\.css/,
                use: ExtracTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }]
                })
            }
        ]
    },
    //plugin,添加插件
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"develement"' : '"production"'
            }
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new UglifyJSPlugin({
            sourceMap: true,
            uglifyOptions: {
                ecma: 8
            }
        }),
        new ExtracTextPlugin('style-[contentHash:8].css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime'
        }),
    ]
}

//dev模式
if (isDev) {
    //webpack-dev-server不能使用chunkhash，否则会报错
    config.output.filename = '[name]-[hash].js';
    config.devtool = '#cheap-module-eval-source-map'
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(), //热更新插件
        new webpack.NoEmitOnErrorsPlugin() //防止错误信息导致webpack退出
    )

    //启动开发服务器
    config.devServer = {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
        hot: true,
        open: true
    }
} else {
    config.plugins.push(new CleanPlugin(['www']))
}

module.exports = config;