webpack4.6.0打包配置vue项目带注释

const path = require('path');// 引入node的path包
const HTMLPlugin = require('html-webpack-plugin');//引入html包
const webpack = require('webpack');
const ExtractPlugin = require('extract-text-webpack-plugin');//将css打包成一个css文件

const isDev = process.env.NODE_ENV === 'development';//判断是否是开发环境
const config = {
    target:'web',//编译目标，运行在web端
    entry:path.join(__dirname,'src/index.js'),//入口文件名（项目主文件）
    output:{//输出出口
        filename:'build.[hash:8].js',     //输出的文件名
        path:path.join(__dirname,'dist') //输出路径
    },
    module:{//配置一个加载资源包
        rules:[//规则
            {
                test:/\.vue$/,//验证文件结尾文件类型
                loader:'vue-loader'//加载的模块
            },
            {
              test:/\.jsx$/,
              loader:'babel-loader'
            },
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{//配置loader参数
                            limit:1024,//文件小于1024字节时，转换成base64编码，写入文件里面
                            name:'[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    //webpack插件配置
    plugins:[
        //webpack编译的过程中和在页面自己写的js判断环境调用process.env
        new webpack.DefinePlugin({
           'process.env':{
               NODE_ENV:isDev ? '"development"':'"production"'
           }
        }),
        new HTMLPlugin()
    ]
};

if (isDev){//开发环境配置
    config.module.rules.push({
        test:/\.styl/,
        use:[
            'style-loader',
            'css-loader',
            {
                loader:'postcss-loader',
                options:{
                    sourceMap:true,//stylus和postcss同时会生成sourceMap，等于true时提高效率
                }
            },
            'stylus-loader'
        ]
    })
    config.devtool = '#cheap-module-eval-source-map';//页面代码调试
    config.devServer = {
        port:8080,
        host:'0.0.0.0',//通过localhost:127.0.0.1或者本机内网IP访问（别人电脑/手机可访问）
        overlay:{//webpack编译出错时，则显示到网页上
            errors:true
        },
        open:true,//启动webpack-devserver时自动打开浏览器
        hot:true    //不刷新热加载数据 需引入插件
      /*  historyApiFallback:{
            //路由地址映射到index.html上
        }*/
    };
    config.plugins.push(//热加载插件
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}else{
    //生成配置环境
    config.entry = {//将所用的类库单独打包
        app:path.join(__dirname,'src/index.js'),
        vendor:['vue']
    }
    config.output.filename = '[name].[chunkhash:8].js';
    config.module.rules.push({
        test:/\.styl/,
        use:ExtractPlugin.extract({
            fallback:'style-loader',
            use:[
                'css-loader',
                {
                    loader:'postcss-loader',
                    options:{
                        sourceMap:true
                    }
                },
                'stylus-loader'
            ]
        })
    })
    config.plugins.push(//正式环境css生成的css文件名字
        //new ExtractPlugin('styles.[contentHash:8].css'),
            //[contentHash]路径变量不可用，可以直接把它去掉或者换成[name]、[id]都可以打包成功
        new ExtractPlugin('styles.[name].css')
    /*//!* webpack 4.0之后就不用了
    //将类库文件单独打包q'q
        new webpack.optimize.CommonsChunkPlugin({
            name:'vendor'
        }),
    // webpack相关的代码单独打包
         new webpack.optimize.CommonsChunkPlugin({
             name: 'runtime'
         })*/
    );
    /*config.optimization = {
        splitChunks:{//设置缓存的 chunks
            cacheGroup:{
                commons:{
                    chunks:'initial',           //必须三选一 initial all  async（默认就是异步）
                    minChunks:2,                 //最小chunk，默认1
                    maxInitialRequests:5,       //最大初始化请求书，默认1
                    minSize:0                 //最小尺寸，默认0
                },
                vendor:{
                    test:/node_modules/,    //正则规则验证，如果符合就提取chunk
                    chunks:'initial',   //必须三选一 initial all  async（默认就是异步）
                    name:'vendor',      //要缓存的，分割出来的chunk名称
                    priority:10,        //缓存组优先级
                    enforce:true
                }
            }
        },
        runtimeChunk:true
    }*/
}

module.exports = config;