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://bm.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.253:80'; switch (argv.env.deploy) { case 'test': staticHost = 'http://static.jishutao.com' break case 'prod': staticHost = 'http://kedejs.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.253', port: 80, allowedHosts: ['127.0.0.1','192.168.0.20','192.168.0.99'], headers: { "Access-Control-Allow-Origin": "*" } } }; })();