const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
const WebpackDevServer = require('webpack-dev-server');
const entries = require('./webpack/entry.config.js');
const version = require('./package.json').version;
const argv = require('yargs').argv;//yargs模块能够解决如何处理命令行参数。yargs模块提供了argv对象,用来读取命令行参数
const dirVars = require('./webpack/dir.config.js');
let theme = {
'@primary-color': '#58a3ff',
'@link-color': '#58a3ff'
};
let isWatch = argv.env.watch == 'watch';
let isDev = isWatch || argv.env.deploy == 'dev';
process.traceDeprecation = true;//process.traceDeprecation 属性被设为 true,则废弃的函数首次被调用时会把警告与堆栈追踪打印到 stderr
process.noDeprecation = true;// process.noDeprecation 属性在首次废弃警告之前被设为 true,则 util.deprecate() 方法什么也不做
module.exports = (function () {
let jumlApi = ''
switch (argv.env.deploy) {
case 'dev':
jumlApi = 'http://sb.jishutao.com'
break
case 'test':
jumlApi = 'http://uat.jishutao.com'
break
case 'prod':
jumlApi = 'http://count.jishutao.com'
break
default:
break
}
let plugins = [
//定义全局变量区分本地测试生产做跳转
new webpack.DefinePlugin({
jumpUrl: `'${jumlApi}'`,
}),
//把入口文件里面的数组打包成verdors.js
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors'
}),
/* 配置好Dll */
new webpack.DllReferencePlugin({
context: dirVars.staticRootDir, // 指定一个路径作为上下文环境,需要与DllPlugin的context参数保持一致,建议统一设置为项目根目录
manifest: require('./dll/'+argv.env.deploy+'/manifest.json') // 指定manifest.json
}),
// 把dll文件复制到打包后的文件中
new CopyWebpackPlugin([
{
from: path.resolve('./dll/'+argv.env.deploy),
to: (__dirname, './dll/'),
ignore: ['.*']
}
]),
// 将 dll.js 插入HTML里
new HtmlWebpackIncludeAssetsPlugin({
assets: [(__dirname, 'dll/dll.js'),(__dirname, 'dll/dll.css')],
append: false
}),
//使用时被配置的文件,将不再需要import和require进行引入,直接使用即可
new webpack.ProvidePlugin({
$: 'jquery',
React:'react',
Mock:'mockjs'
}),
//extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
}),
//user HtmlWebpack
new HtmlWebpackPlugin({
title: '用户首页',//设置生成的html文件的
值
filename: 'user/index.html',//设置子文件夹路径
template: './template/template.html',//顾名思义,是生成文件的模板
chunks: ['user/index', 'vendors']//测试模块
}),
new HtmlWebpackPlugin({
title: '用户登录',
filename: 'user/login.html',
template: './template/template.html',
chunks: ['user/login', 'vendors']
}),
new HtmlWebpackPlugin({
title: '用户注册',
filename: 'user/signIn.html',
template: './template/template.html',
chunks: ['user/signIn', 'vendors']
}),
new HtmlWebpackPlugin({
title: '用户中心管理',
filename: 'user/account/index.html',
template: './template/template.html',
chunks: ['user/account/index', 'vendors']
}),
new HtmlWebpackPlugin({
title: '在线评估',
filename: 'user/account/evaluateInfo.html',
template: './template/template.html',
chunks: ['user/account/evaluateInfo', 'vendors']
}),
//管理员模块
new HtmlWebpackPlugin({
title: '管理员-登录',
filename: 'admin/login.html',
template: './template/template.html',
chunks: ['admin/login', 'vendors']
}),
new HtmlWebpackPlugin({
title: '管理员-首页',
filename: 'admin/index.html',
template: './template/template.html',
chunks: ['admin/index', 'vendors']
})
];
if (!isDev) {
//这个使用uglifyJs压缩你的js代码
plugins.unshift(new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}));
plugins.unshift(new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: true
}
}));
}
let staticHost = 'http://172.16.0.74:80';
switch (argv.env.deploy) {
case 'test':
staticHost = 'http://static.jishutao.com'
break
case 'prod':
staticHost = 'http://count.jishutao.com'
break
default:
break
}
staticHost = staticHost + '/client/' + version + '/';
theme['@icon-url'] = '"' + staticHost + 'css/iconfont/iconfont"'
return {
entry: isWatch ? entries.watch : entries.prod,
output: {
path: path.resolve(__dirname, './build/' + argv.env.deploy+'/'+ version),
filename: '[name].js',
publicPath: staticHost,
chunkFilename: 'chunks/[name].[hash:8].js'
},
module: require('./webpack/module.config.js')(theme),
resolve: {
alias:{
'@':__dirname+'/js/component',
'img':__dirname+'/image',
'css':__dirname+'/css',
'js':__dirname+'/js'
},
extensions: ['.js', '.jsx']
},
plugins: plugins,
devServer: {
disableHostCheck: true,
host: '172.16.0.74',
port: 80,
allowedHosts: ['127.0.0.1','192.168.0.20','192.168.0.99'],
headers: {
"Access-Control-Allow-Origin": "*"
}
}
};
})();