多页面webpack配置

工程结构如下 

 

dev-serverconst config = require('../config');
const express = require('express');
const path = require('path');
const fs = require('fs');
// const favicon=require('serve-favicon');
const exec = require('child_process').exec;
process.env.NODE_ENV = config.dev.env.NODE_ENV;
console.log(config)
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.dev');webpack(webpackConfig, function(err, stats, errStates) {process.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + '\n')
});//#########
const app = express();
// app.use(webpackDevMiddleware(compiler, {
//   hot:false
//   options
// }));

app.get("/", renderHtml);
app.get("/:file", renderHtml);
// app.use(favicon(path.join(__dirname, '../dist/public', 'favicon.ico')));
app.use(express.static(path.join(__dirname, '../dist')));function renderHtml(req, res) {// res.header("Access-Control-Allow-Origin","*");// res.header("Access-Control-Allow-Headers", "x-csrf-token");// res.header("Access-Control-Allow-Headers", "Access-Token");let fileName = req.params.file;if (!fileName) fileName = "index.html";fileName = fileName.split(".html")[0];fs.readFile(path.join(__dirname, '../src/modules/' + fileName + '/' + fileName + '.html'), function(err, data) {// bodyif (err) {console.log(err);//404：NOT FOUNDres.writeHead(404, { "Content-Type": "text/html" });} else {//200：OKres.writeHead(200, { "Content-Type": "text/html" });res.write(data.toString());}res.end();});
}const server = app.listen(3300, function() {console.log("listening on port 3300")
});
pack-betaconst config = require('../config');
const delFiles  = require('./utils').delFiles;
process.env.NODE_ENV = config.beta.env.NODE_ENV;
const exec = require('child_process').exec;const webpack = require('webpack');
const webpackConfig = require('./webpack.config.beta');webpack(webpackConfig,function (err, stats) {console.log(err);process.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + '\n');// exec("gulp", function (err, str, strerr) {//   console.log(str);// });
}); 
pack-prodconst config = require('../config');
const delFiles  = require('./utils').delFiles;
process.env.NODE_ENV = config.prod.env.NODE_ENV;
const exec = require('child_process').exec;const webpack = require('webpack');
const webpackConfig = require('./webpack.config.prod');//delFiles("../dist/js");
//delFiles("../dist/css");
webpack(webpackConfig,function (err, stats) {console.log(err);process.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + '\n');// exec("gulp", function (err, str, strerr) {//   console.log(str);// });
});
utilsconst path = require('path');
const fs = require('fs');
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {delFiles: function (route) {let p = path.resolve(__dirname, route);let files = fs.readdirSync(p);for (let i = 0; i < files.length; i++) {del(p + "/" + files[i])}function del(file) {fs.unlinkSync(file);fs.existsSync(file);}return true;},ergodicFiles:function (dirPath) {let l = [];let p = path.resolve(__dirname, dirPath);fs.readdirSync(p).forEach(function(file,i){l.push(file);// l.push({name:file,path:p});
    });return l;},ergodicEntry:function (dirPath) {let l = {};let p = path.resolve(__dirname, dirPath);fs.readdirSync(p).forEach(function(file,i){l[file] = [p+'/'+file+'/'+file+'.js']});return l;},getHTMLList:function (dirPath) {let obj = this.ergodicEntry(dirPath);let extra = this.extraResource();let ha=[];for (let key in obj) {ha.push(new htmlWebpackPlugin({template: 'index.html',filename: key + ".html?[hash]",fileId: key,cache:false,env:process.env.NODE_ENV,time:this.dealTime(new Date(),"yyyy-mm-dd hh:mm","-"),extra:(function () {if(extra[key]){return extra[key];}else{return [];}})(),chunks: ['jquery', 'vue', 'common', key]}))}return ha;},source:function(){let path = "http://cdn2.test.dianjingquan.cn";if(process.env.NODE_ENV === 'production') path = "http://cdn2.test.dianjingquan.cn";return {cropper:'<script src="'+path+'/js/cropper.js"></script>',//截图插件snapSvg:'<script src="'+path+'/js/snap.svg-min.js"></script>',//svg动画swiper:'<script src="'+path+'/js/swiper-3.4.2.jquery.min.js"></script>',//swap动画效果jsEncrypt:'<script src="'+path+'/js/jsencrypt.js"></script>',pageWalkThrough:'<script src="'+path+'/js/jquery.pagewalkthrough.min.js"></script>',jqueryUiWidget:'<script src="'+path+'/js/jquery.ui.widget.js"></script>',jqueryFileUpload:'<script src="'+path+'/js/jquery.fileupload.js"></script>',//jquery图片上传插件qrcode:'<script src="'+path+'/js/qrcode.min.js"></script>',//生成二维码插件jedate:'<script src="'+path+'/jedate/jquery.jedate.min.js"></script>',//日历插件emoji:'<script src="'+path+'/js/emoji.js"></script>',//emoji表情gt:'<script src="'+path+'/js/gt.js"></script>',moxie:'<script src="'+path+'/js/moxie.js"></script>',plupload:'<script src="'+path+'/js/plupload.dev.js"></script>'};},extraResource:function () {let s =this.source();return {index:[s.swiper,s.jsEncrypt],matchDetail:[s.pageWalkThrough,s.jqueryUiWidget,s.jqueryFileUpload,s.qrcode,s.snapSvg],createMatch:[s.cropper,s.jedate],userCenter:[s.cropper,s.emoji],entryList:[s.cropper],login:[s.cropper,s.jsEncrypt,s.gt],personalProfile:[s.cropper,s.gt,s.jsEncrypt,s.moxie,s.plupload],previewAgainst:[s.snapSvg],sample:[s.cropper],share:[s.qrcode],vsAgainst:[s.snapSvg]}},dealTime : function (time, type, o) {let tt = new Date(time);switch (type) {case "yyyy-mm-dd hh:mm":return tt.getFullYear() + o + ((tt.getMonth() + 1) < 10 ? '0' + (tt.getMonth() + 1) : (tt.getMonth() + 1)) + o + (tt.getDate() < 10 ? '0' + tt.getDate() : tt.getDate()) + " " + tt.getHours() + ':' + (tt.getMinutes() < 10 ? '0' + tt.getMinutes() : tt.getMinutes());case 'yyyy-mm-dd':return tt.getFullYear() + o + ((tt.getMonth() + 1) < 10 ? '0' + (tt.getMonth() + 1) : (tt.getMonth() + 1)) + o + (tt.getDate() < 10 ? '0' + tt.getDate() : tt.getDate());case 'mm-dd':if (o) {return tt.getMonth() + 1 + o + tt.getDate();} else {return tt.getMonth() + 1 + "月" + tt.getDate() + "日";}case 'hh:mm':return tt.getHours() + ':' + (tt.getMinutes() < 10 ? '0' + tt.getMinutes() : tt.getMinutes())}}
};
webpack.baseconst path = require('path');
const util = require('./utils');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
function resolve (dir) {return path.join(__dirname, '..', dir)
}
let vueOption = {test: /\.vue$/,loader: 'vue-loader',// options: {//   loaders: {//     css: ExtractTextPlugin.extract({//       fallback: "vue-style-loader",//       use: "css-loader"//     }),//     scss: ExtractTextPlugin.extract({//       fallback: "vue-style-loader",//       use: "css-loader!sass-loader"//     }),//   }// }
};
if(process.env.NODE_ENV === 'beta' || process.env.NODE_ENV === 'prod'){vueOption = {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {css: ExtractTextPlugin.extract({fallback: "vue-style-loader",use: "css-loader"}),scss: ExtractTextPlugin.extract({fallback: "vue-style-loader",use: "css-loader!sass-loader"}),}}}
}
module.exports = {entry: Object.assign(util.ergodicEntry('../src/modules'),{jquery : ["jquery"],vue : ["vue"],}),//值可以是字符串、数组或对象,
  module: {rules: [vueOption,{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/,query:{}},{test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {name: 'images/[name].[ext]?[hash]'}},{test: /\.(woff|eot|ttf|otf)$/,loader: 'url-loader',options: {name: '[name].[ext]?[hash]'}},{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader!sass-loader"})},// {//   test: /\.(css|scss)$/,//   loader: "style-loader!css-loader!!sass-loader",// }
    ]},resolve: {alias: {'env':(function (env) {if (env === 'beta') return resolve('config/env-beta.js');else if (env === 'prod') return resolve('config/env-prod.js');else return resolve('config/env-dev.js');})(process.env.NODE_ENV),'$':'jquery','vue$': 'vue/dist/vue.esm.js','@': resolve('src'),},extensions: ['.ts', '.js','.vue','.css','.scss']}
};
webpack.beta
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const util = require('./utils');module.exports = merge(baseWebpackConfig,{output: {path: path.resolve(__dirname, '../build/beta'),//Webpack结果存储publicPath: '/',//用于在生产模式和开发模式下下更新内嵌到css、html，img文件里的url值filename: 'js/[name]-[hash].js',chunkFilename: './js/[name]-[hash].js'},plugins: [new ExtractTextPlugin("css/[name]-[hash].css"),new CommonsChunkPlugin({name:["common","jquery","vue"],filename:"js/[name]-[hash].js",minChunks:2}),...util.getHTMLList('../src/modules'),new webpack.optimize.UglifyJsPlugin({sourceMap: true,compress: {warnings: false,drop_debugger: true,drop_console: true}}),],devServer: {//webpack-dev-server配置historyApiFallback: true,//不跳转noInfo: true,inline: true//实时刷新
  },performance: {hints: false},// compress: {//   warnings: false, // 去除warning警告//   drop_debugger: true, // 发布时去除debugger语句//   drop_console: true // 发布时去除console语句// },// devtool: '#eval-source-map'
});// if (process.env.NODE_ENV === 'production') {
//   module.exports.devtool = '#source-map';
//   // http://vue-loader.vuejs.org/en/workflow/production.html
//   module.exports.plugins = (module.exports.plugins || []).concat([
//     new webpack.DefinePlugin({
//       'process.env': {
//         NODE_ENV: '"production"'
//       }
//     }),
//     new webpack.optimize.UglifyJsPlugin({
//       sourceMap: true,
//       compress: {
//         warnings: false
//       }
//     }),
//     new webpack.LoaderOptionsPlugin({
//       minimize: true
//     })
//   ])
// }
webpack.dev
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const util = require('./utils');
module.exports = merge(baseWebpackConfig,{output: {path: path.resolve(__dirname, '../dist'),//Webpack结果存储publicPath: '../',//用于在生产模式和开发模式下下更新内嵌到css、html，img文件里的url值filename: 'js/[name].js'},plugins: [new ExtractTextPlugin("css/[name].css"),// ...util.getHTMLList('../src/modules'),
  ],devServer: {//webpack-dev-server配置historyApiFallback: true,//不跳转noInfo: true,// inline: true//实时刷新
  },performance: {hints: false},watch:true,watchOptions:{// ignored: [/node_modules/,/dist/]
  }// devtool: '#eval-source-map'
});
webpack.prod
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const util = require('./utils');
module.exports = merge(baseWebpackConfig,{output: {path: path.resolve(__dirname, '../dist'),//Webpack结果存储publicPath: '../',//用于在生产模式和开发模式下下更新内嵌到css、html，img文件里的url值filename: 'js/[name].js'},plugins: [new ExtractTextPlugin("css/[name].css"),// ...util.getHTMLList('../src/modules'),
  ],devServer: {//webpack-dev-server配置historyApiFallback: true,//不跳转noInfo: true,// inline: true//实时刷新
  },performance: {hints: false},watch:true,watchOptions:{// ignored: [/node_modules/,/dist/]
  }// devtool: '#eval-source-map'
});

 

config 文件夹
index.js// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path');module.exports = {beta: {env: {NODE_ENV:'beta'},},dev: {env: {NODE_ENV:'development'},},prod: {env: {NODE_ENV:'prod'},}
};

 

pack.json
{"name": "ees_web","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "node build_setting/dev-server.js","pack-beta": "node build_setting/pack-beta.js","pack-prod": "node build_setting/pack-prod.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"babel-eslint": "^7.2.3","babel-polyfill": "^6.26.0","babel-preset-es2015": "^6.24.1","babel-preset-stage-0": "^6.24.1","babel-preset-stage-1": "^6.24.1","child_process": "^1.0.2","djq-component": "^1.0.1","echarts": "^3.8.5","es6-promise": "^4.1.1","express": "^4.16.2","extract-text-webpack-plugin": "^3.0.2","gulp": "^3.9.1","gulp-inject": "^4.2.0","gulp-minify": "^1.0.0","gulp-sequence": "^0.4.6","jquery": "^3.2.1","node-sass": "^4.7.2","sass-loader": "^6.0.6","ts-loader": "^2.3.4","vee-validate": "^2.0.0-rc.19","vue": "^2.4.2","vue-cli": "^2.8.2","vue-cropper": "^0.2.5","vue-infinite-loading": "^2.2.1","vuex": "^2.4.0","webpack-hot-middleware": "^2.19.1","webpack-merge": "^4.1.1"},"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","cropper": "^3.1.3","css-loader": "^0.28.7","file-loader": "^0.11.2","style-loader": "^0.18.2","stylus-loader": "^3.0.1","url-loader": "^0.5.9","vue-loader": "^13.0.4","vue-router": "^2.7.0","vue-template-compiler": "^2.4.2","webpack": "^3.10.0","webpack-dev-server": "^2.7.1"}
}

 

转载于:https://www.cnblogs.com/lisiyang/p/8426067.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/486839.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深度 | 量子计算技术的研究现状与未来

深度 | 量子计算技术的研究现状与未来

来源&#xff1a;本源量子导读1900年 Max Planck 提出“量子”概念&#xff0c;宣告了“量子”时代的诞生。科学家发现&#xff0c;微观粒子有着与宏观世界的物理客体完全不同的特性。宏观世界的物理客体&#xff0c;要么是粒子&#xff0c;要么是波动&#xff0c;它们遵从经典…
阅读更多...
exsist什么意思_exist什么意思_通达信EXIST什么意思

exsist什么意思_exist什么意思_通达信EXIST什么意思

matlab中的exist是什么意思exist用来判断变量或函数是否存在&#xff1a; exist Check if variables or functions are defined.exist(A) returns:0 if A does not exist1 if A is a variable in the workspace2 if A is an M-file on MATLABs search path. It also returns …
阅读更多...
拥有“上帝视角”是怎样的体验？高分多模卫星首批影像成果发布

拥有“上帝视角”是怎样的体验？高分多模卫星首批影像成果发布

本文转载自“中国的航天”&#xff0c;原标题《拥有“上帝视角”是怎样的体验&#xff1f;高分多模卫星首批影像成果发布》&#xff0c;作者 | 杨璐9月29日&#xff0c;国家航天局发布了高分辨率多模综合成像卫星&#xff08;以下简称“高分多模卫星”&#xff09;首批20余幅亚…
阅读更多...
1.2 - 列表练习题

1.2 - 列表练习题

1 1.创建列表2 >>> names [old_driver, rain, jack, shanshan, peiqi, black_girl]3 >>> names4 [old_driver, rain, jack, shanshan, peiqi, black_girl] 5 6 2.插入alex7 >>> names.insert(-1,alex)8 >>> names9 [old_driver, rain, ja…
阅读更多...
java 工程ssl配置_HTTPS_SSL配置的步骤以及原理说明

java 工程ssl配置_HTTPS_SSL配置的步骤以及原理说明

1、单向认证&#xff0c;就是传输的数据加密过了&#xff0c;但是不会校验客户端的来源2、双向认证&#xff0c;如果客户端浏览器没有导入客户端证书&#xff0c;是访问不了web系统的&#xff0c;找不到地址&#xff0c;想要用系统的人没有证书就访问不了系统HTTPS概念方法/步骤…
阅读更多...
我们人类与人工智能技术究竟是怎样的关系？

我们人类与人工智能技术究竟是怎样的关系？

图片来自pixabay.com来源&#xff1a;赛先生撰文 | 爱德华阿什福德李&#xff08;加州大学伯克利分校教授&#xff09;责编 | 李珊珊摘要&#xff1a;数字技术正在和人类文明协同进化。我们依赖技术而生存&#xff0c;技术也依赖我们&#xff0c;这种合作共生的趋势越来越明显。…
阅读更多...
Js拼接嵌套php代码,分享一个js文件中嵌套php会出错的问题

Js拼接嵌套php代码,分享一个js文件中嵌套php会出错的问题

前提&#xff1a;使用ThinkPHP。后台传一个变量到html页面&#xff1a;$this->assign("variable", $variable);问题&#xff1a;在html页面中嵌套js代码&#xff0c;在js的代码中输出这个变量&#xff1a;var variable <?php echo $variable;?>;alert(va…
阅读更多...
textarea标签内的文字无缘故居中解决原因

textarea标签内的文字无缘故居中解决原因

<textarea>内容内容</textarea>浏览器会解析为<textarea><br> 内容内容</textarea>可见在写<textarea>时一定要写成<textarea>内容内容</textarea> 必须写成一行&#xff01;转载于:https://www.cnblogs.com/zhaomeizi/p/…
阅读更多...
中国工程院院士陈左宁详述：人工智能模型和算法的七大发展趋势

中国工程院院士陈左宁详述：人工智能模型和算法的七大发展趋势

来源&#xff1a;C114通信网在近日举行的“第十六届CCF全过高性能计算学术年会”上&#xff0c;中国工程院副院长、中国科协副主席、中国工程院院士陈左宁发表了题为《人工智能进展对算力需求分析》的演讲。在演讲中&#xff0c;她阐述了人工智能模型和算法的七大发展趋势。陈左…
阅读更多...
php date 有warning,PHP Warning: strtotime()错误解决办法

php date 有warning,PHP Warning: strtotime()错误解决办法

strtotime()函数是php日期函数了&#xff0c;出现这种问题就是我们php.ini中的date.timezone没有设置好&#xff0c;只要配置一下时区即可解决。php5.1.0开始&#xff0c;php.ini里加入了date.timezone这个选项&#xff0c;默认情况下是关闭的。显示的时间都是格林威治标准时间…
阅读更多...
数据库备份与还原

数据库备份与还原

window to widows 数据库备份与还原 步骤&#xff1a;1、 D:\postgres\bin>pg_dump -h localhost -U postgres -p 5432 -d demo -f "D:/demo.dmp" 备份数据库 将demo 备份为 demo.dmp 文件&#xff08;要新建 demo2 数据库 因为还原的语句不包含创建数据库操作&a…
阅读更多...
量子计算技术的研究现状与趋势

量子计算技术的研究现状与趋势

来源&#xff1a;《中国科学》 2020年 第50卷 第9期作者&#xff1a;郭光灿导读&#xff1a;1900年 Max Planck 提出“量子”概念&#xff0c;宣告了“量子”时代的诞生。科学家发现&#xff0c;微观粒子有着与宏观世界的物理客体完全不同的特性。宏观世界的物理客体&#xf…
阅读更多...
网页字段位置php改变,php实现子字符串位置相互对调互换的方法

网页字段位置php改变,php实现子字符串位置相互对调互换的方法

本文实例讲述了php实现子字符串位置相互对调互换的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;/*子字符串位置互换*/$str1"Tom";$str2"Jack";$str"This is an example,you see Tom tell Jack something";function str_change($…
阅读更多...
Java毕业设计——springboot+vue电影院会员管理系统

Java毕业设计——springboot+vue电影院会员管理系统

1&#xff0c;项目背景 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的电影院会员管理系统&#xff1b;电影院会员管理系统的管理工作系统化、规范化&#xff0c;也会提高影院形象…
阅读更多...
idea创建maven web项目

idea创建maven web项目

创建maven web项目 1&#xff1a;首先打开idea&#xff0c;点击“create new project“&#xff0c;在左边一栏找到maven&#xff0c;右边把“create from archetype“钩上&#xff0c;根据模版来创建项目&#xff0c; 注意在选择模版的时候一定要选择org.apache.maven.archety…
阅读更多...
世界一流大学观察报告：斯坦福大学何以后来居上？

世界一流大学观察报告：斯坦福大学何以后来居上？

斯坦福大学(Stanford University)本文转自 管理学季刊 公众号文|石毓智&#xff0c;斯坦福大学博士、新加坡国立大学终身教职只有短短120年历史的斯坦福大学&#xff0c;已有近30人获得诺奖&#xff0c;不要说世界上其他大学难以匹敌&#xff0c;就是拿国家来比&#xff0c;能超…
阅读更多...
php 二进制权限,基于二进制位的权限控制（数据库里的二进制）

php 二进制权限,基于二进制位的权限控制（数据库里的二进制）

declare a BINARY(2)set a 32768select aBINARY 字节 1B 8位 bitBINARY(2) 16 位二进制数换算16进制位4位2进制数最大值为524287 转换16进制OxFFFF (111111111111111)最高位值32768&#xff0c;转换16进制Ox8000 即两个字节位(1000000000000000)如需16位二进制数据&#x…
阅读更多...
PowerShell（PHPStorm terminal with PowerShell）运行git log中文乱码

PowerShell（PHPStorm terminal with PowerShell）运行git log中文乱码

解决方案&#xff1a; 1&#xff09;以管理员身份运行PowerShell 2&#xff09;新建一个针对PowerShell的Pofile文件 New-Item -Path $Profile -ItemType file -Force3&#xff09;用记事本打开这个文件 notepad $Profile4&#xff09;然后输入并保存退出 $env:LC_ALLC.UTF-85&…
阅读更多...
机器学习研究者必知的八个神经网络架构

机器学习研究者必知的八个神经网络架构

本文转自计算机视觉研究院本文简述了机器学习核心结构的历史发展&#xff0c;并总结了研究者需要熟知的 8 个神经网络架构。我们为什么需要「机器学习」&#xff1f;机器学习对于那些我们直接编程太过复杂的任务来说是必需的。有些任务很复杂&#xff0c;以至于人类不可能解决任…
阅读更多...
php伪静态失败,php伪静态后html不能访问怎么办

php伪静态失败,php伪静态后html不能访问怎么办

php伪静态后html不能访问的解决办法&#xff1a;首先判断文件是否存在&#xff1b;然后设置存在则不rewirte&#xff0c;不存在且符合规则才rewrite&#xff1b;最后修改htaccess文件即可。具体问题&#xff1a;PHP伪静态后不能访问纯html文件.htaccess文件RewriteEngine onRew…
阅读更多...
最新文章

Copyright @ 2022~2023