作者：手机用户2502891985 | 来源：互联网 | 2022-01-25 15:14
在网上看到很多人都写了“webpack最佳实践方案”，适合的才是“最佳”的，在这里总结一下自己在工作过程中总结出来的最佳实践，所以本文主要介绍了关于webpack配置的相关资料，需要的朋友们可以参考借鉴，下面来一起看看吧。
本文主要介绍了关于webpack配置的最佳实践，本文分享的实践具有以下的优势：
- 使用happypack提升打包速度。
- 使用MD5 hash可以生成文件版本，进行版本控制
- 在非单页面的系统中支持多个入口的配置
- 模板中可以利用htmlplugin输出一些配置性的信息
- 支持devserver，支持本地json数据的mock
一、webpack最佳实践中的需求
1.热加载
2.语法校验
3.js打包
4.模板打包
二、解决方案
1.webpack.config.json
var path = require('path');
var fs = require('fs');
var exec = require('child_process').exec;
var HappyPack = require('happypack');
var merge = require('webpack-merge');
var webpack = require('webpack');
var WebpackMd5Hash = require('webpack-md5-hash');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, __dirname+'/devserver/public');
//取出页面文件映射
function getHtmlPluginArr() {
var data = JSON.parse(fs.readFileSync('entryconf.json', 'utf-8'));
var pageList = data.pageList;
var resultObj = {
"pluginArr": [],
"entryObj": {}
};
for (var index = 0; index
2.模板文件的配置：
<% if (htmlWebpackPlugin.options.extra&&htmlWebpackPlugin.options.extra.js) {%>
<% for(var i = 0;i
<% } %>
<% } %>
3.webpack.dev.config.json配置
var path = require('path');
var fs = require('fs');
var merge = require('webpack-merge');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var MODULE_PATH = path.resolve(ROOT_PATH, 'node_modules');
//取出页面文件映射
function getHtmlPluginArr() {
var data = JSON.parse(fs.readFileSync('app/entries.json', 'utf-8'));
var pageList = data.pageList;
var resultObj = {
"pluginArr": [],
"entryObj": {}
};
for (var index = 0; index
总结
以上就是关于webpack最佳配置的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
京公网安备 11010802041100号