webpack配置的最佳实践分享
本文主要介绍了关于webpack配置的最佳实践，本文分享的实践具有以下的优势：
- 使用happypack提升打包速度。
- 使用MD5hash可以生成文件版本，进行版本控制
- 在非单页面的系统中支持多个入口的配置
- 模板中可以利用htmlplugin输出一些配置性的信息
- 支持devserver，支持本地json数据的mock
一、webpack最佳实践中的需求
1.热加载
2.语法校验
3.js打包
4.模板打包
二、解决方案
1.webpack.config.json
varpath=require('path');
varfs=require('fs');
varexec=require('child_process').exec;
varHappyPack=require('happypack');
varmerge=require('webpack-merge');
varwebpack=require('webpack');
varWebpackMd5Hash=require('webpack-md5-hash');
varHtmlwebpackPlugin=require('html-webpack-plugin');
varROOT_PATH=path.resolve(__dirname);
varAPP_PATH=path.resolve(ROOT_PATH,'app');
varBUILD_PATH=path.resolve(ROOT_PATH,__dirname+'/devserver/public');
//取出页面文件映射
functiongetHtmlPluginArr(){
vardata=JSON.parse(fs.readFileSync('entryconf.json','utf-8'));
varpageList=data.pageList;
varresultObj={
"pluginArr":[],
"entryObj":{}
};
for(varindex=0;index
2.模板文件的配置：
<%=htmlWebpackPlugin.options.title||'上单'%>
3.webpack.dev.config.json配置
varpath=require('path');
varfs=require('fs');
varmerge=require('webpack-merge');
varwebpack=require('webpack');
varHtmlwebpackPlugin=require('html-webpack-plugin');
varOpenBrowserPlugin=require('open-browser-webpack-plugin');
varROOT_PATH=path.resolve(__dirname);
varAPP_PATH=path.resolve(ROOT_PATH,'app');
varBUILD_PATH=path.resolve(ROOT_PATH,'build');
varMODULE_PATH=path.resolve(ROOT_PATH,'node_modules');
//取出页面文件映射
functiongetHtmlPluginArr(){
vardata=JSON.parse(fs.readFileSync('app/entries.json','utf-8'));
varpageList=data.pageList;
varresultObj={
"pluginArr":[],
"entryObj":{}
};
for(varindex=0;index
总结
以上就是关于webpack最佳配置的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。