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;