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 < pageList.length; index++) {
var element = pageList[index];
var entry = element.entry;
//通过对app.json中src的路径截取获得分发路径
var filename = (function () {
var filenameStr = entry.split("./app/page/")[1];
return filenameStr.substr(0, filenameStr.lastIndexOf("."));
})();
var title = element.title;
var extra = element.extra;
resultObj.entryObj[filename] = entry;
//利用路径一部分来进行HtmlwebpackPlugin的chunks
resultObj.pluginArr.push(
new HtmlwebpackPlugin({
chunks: [filename], //当前页面js
title: title,
extra: extra,//包含页面额外的配置信息
template: "app/" + "template.ejs",
filename: 'views/'+filename + '.ejs',
chunksSortMode: "dependency"//按chunks的顺序对js进行引入
})
);
//HappyPack, loader多进程去处理文件
resultObj.pluginArr.push(
new HappyPack({ id: 'html' }),
new HappyPack({ id: 'css' }),
new HappyPack({ id: 'js' }),
new HappyPack({ id: 'tpl' })
);
}
return resultObj;
}
var appJsonObj = getHtmlPluginArr();
/**通用配置 */
var commonConfig = {
entry: appJsonObj.entryObj,
module: {
loaders: [
{ test: /\.html$/, loader: "html?minimize=false", happy: {id: "html"} },
{ test: /\.json$/, loader: "json" },
{ test: /\.scss|\.css$/, loaders: ["style", "css", "sass"], happy: {id: "css"} },
{ test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=images/[name]-[hash:10].[ext]' },
{ test: /\.handlebars/, loader: "handlebars", query: { helperDirs: [APP_PATH + "/helper"] }, happy: {id: "tpl"} },
{ test: /\.js$|\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015'] }, happy: {id: "js"} },
]
},
output: {
path: BUILD_PATH,
filename: "js/[name].js"
},
externals: {
"jquery": "jQuery"
},
//配置短路径引用
resolve: {
extensions: ['', '.js', '.json', '.scss','.vue'],
alias: {
vue : 'vue/dist/vue.js'
}
},
plugins: appJsonObj.pluginArr,
cache: true
}
module.exports = merge(commonConfig, {
output: {
publicPath: '/',
path: BUILD_PATH,
filename: "js/[name]-[chunkhash:10].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new WebpackMd5Hash()
]
});
2.模板文件的配置：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
<%= htmlWebpackPlugin.options.title || '上单'%>
</title>
</head>
<body>
<div id="main-container"></div>
<% if (htmlWebpackPlugin.options.extra&&htmlWebpackPlugin.options.extra.js) {%>
<% for(var i = 0;i < htmlWebpackPlugin.options.extra.js.length;i++){ %>
<script src="<%= htmlWebpackPlugin.options.extra.js[i] %>"></script>
<% } %>
<% } %>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
</html>
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 < pageList.length; index++) {
var element = pageList[index];
var src = element.entry;
//通过对app.json中src的路径截取获得分发路径
var dist = (function() {
var s1 = src.split("./app/entries/")[1];
var s2 = s1.substr(0, s1.lastIndexOf("/"));
return s2;
})();
var title = element.title;
var extra = element.extra;
resultObj.entryObj[dist] = src;
//利用路径一部分来进行HtmlwebpackPlugin的chunks
resultObj.pluginArr.push(
new HtmlwebpackPlugin({
chunks: [dist], //当前页面js
title: title,
extra: extra,//包含页面额外的配置信息
template: "app/" + "template.ejs",
filename: dist + '.html',
chunksSortMode: "dependency" //按chunks的顺序对js进行引入
})
);
}
return resultObj;
}
var appJsonObj = getHtmlPluginArr();
/**通用配置 */
var commonConfig = {
entry: appJsonObj.entryObj,
module: {
loaders: [
{ test: /\.html$/, loader: "html?minimize=false" },
{ test: /\.json$/, loader: "json" },
{ test: /\.scss|\.css$/, loaders: ["style", "css", "sass"] },
{ test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=../images/[name]-[hash:10].[ext]' },
{ test: /\.handlebars/, loader: "handlebars" },
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015','stage-3','react'] } },
{ test: /\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react','stage-3','es2015']} }
]
},
output: {
path: BUILD_PATH,
filename: "js/[name].js"
},
externals: {
"jquery": "jQuery"
},
//配置短路径引用
resolve: {
alias: {
module: path.resolve(APP_PATH, 'module'),
service: path.resolve(APP_PATH, "services"),
component: path.resolve(APP_PATH, "components"),
entries: path.resolve(APP_PATH, "entries"),
routes: path.resolve(APP_PATH, "routes"),
node_modules: path.resolve(ROOT_PATH, 'node_modules')
},
extensions: ['', '.js', '.jsx']
},
plugins: appJsonObj.pluginArr,
devtool: "cheap-source-map",
cache: true
}
//webpack-dev-server 提供的是内存级别的server,不会生成build的文件夹
//访问路径直接参照build下的路径 如http://127.0.0.1:8080/shop/updateShop.html
module.exports = merge(commonConfig, {
devServer: {
hot: true,
inline: true,
progress: true,
host: process.env.HOST,
port: "8808",
proxy: {
'/api/getLeftBar': {
target: 'http://127.0.0.1:8808/mock',//dev
secure: false
},
'/api/getIndexData': {
target: 'http://127.0.0.1:8808/mock',//dev
secure: false
},
'/api/getblogs': {
target: 'http://127.0.0.1:8808/mock',//dev
secure: false
},
'/panda/*': {
target: 'http://10.4.233.139:8411/',//dev
secure: false
},
//转发至本地mock
'/page3/*': {
target: 'http://127.0.0.1:8808',
secure: false
}
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({
url: 'http://127.0.0.1:8808/test.html'
})
]
});
总结
以上就是关于webpack最佳配置的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
深入理解Webpack 中路径的配置
前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac
-
webpack配置文件和常用配置项介绍
1.安装webpack 1.全局安装webpack:npm install webpack -g 或者转化了cnpm则将npm改为cnpm进行安装 2.进行初始化建立package.json文件记录插件,命令行:npm init 3.webpack安装到项目并将写入package.json的devDependencies中, 命令行:npm install webpack --save-dev. 2.webpack配置文件介绍 1.webpack需要配置文件webpack.config.js,手
-
基于webpack 实用配置方法总结
1.webpack.config.js配置文件为: //处理共用.通用的js var webpack = require('webpack'); //处理html模板 var htmlWebpackPlugin = require('html-webpack-plugin'); //css单独打包 var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 获取html-webpack-plugin参数的方法 v
-
webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w
-
webpack配置的最佳实践分享
本文主要介绍了关于webpack配置的最佳实践,本文分享的实践具有以下的优势: 使用happypack提升打包速度. 使用MD5 hash可以生成文件版本,进行版本控制 在非单页面的系统中支持多个入口的配置 模板中可以利用htmlplugin输出一些配置性的信息 支持devserver,支持本地json数据的mock 一.webpack最佳实践中的需求 1.热加载 2.语法校验 3.js打包 4.模板打包 二.解决方案 1.webpack.config.json var path = requi
-
分享20个数据库设计的最佳实践
数据库设计是整个程序的重点之一,为了支持相关程序运行,最佳的数据库设计往往不可能一蹴而就,只能反复探寻并逐步求精,这是一个复杂的过程,也是规划和结构化数据库中的数据对象以及这些数据对象之间关系的过程.下面给出了20个数据库设计最佳实践,当然,所谓最佳,还是要看它是否适合你的程序.一起来了解了解吧. 1.使用明确.统一的标明和列名,例如 School, SchoolCourse, CourceID. 2.数据表名使用单数而不是复数,例如 StudentCourse,而不是StudentCourse
-
MySQL 配置主从复制实践分享
目录 一.检测通信 二.master配置 1. 开启二进制日志 2. 创建一个用于主从库通信用的账号 3. 获取binlog的日志文件名和position 三.slave配置 1. 配置全局唯一的server-id 2. 使用master创建的账户读取binlog同步数据 3. 开启slave服务 四.配置中可能出现的问题 1. 网络连接问题 2. binlog的position问题 3. SQL线程出错 一.检测通信 查看主库(master)和从库(slave)的ip地址,并检测是否可以通信
-
React 组件性能最佳优化实践分享
目录 React 组件性能优化最佳实践 组件卸载前进行清理操作 类组件使用纯组件PureComponent 什么是纯组件 什么是浅层比较 shouldComponentUpdate 纯函数组件使用React.memo优化性能 memo 基本使用 memo 传递比较逻辑 使用组件懒加载 路由组件懒加载 根据条件进行组件懒加载(适用于组件不会随条件频繁切换) 使用Fragment 避免额外标记 不要使用内联函数定义 在构造函数中进行函数this绑定 类组件中的箭头函数 优化条件渲染 避免使用内联样式
-
Go interface 接口的最佳实践经验分享
目录 Go语言-Go 接口的最佳实践 什么是Golang中的interface 编写接口的最佳实践 1. 保持interfaces足够小 2. Interfaces Should Have No Knowledge of Satisfying Types 3. 接口不是类 有关接口的更多信息 空的接口 Zero value of an interface 指针上的接口 Go语言-Go 接口的最佳实践 原文连接:https://blog.boot.dev/golang/golang-interfa
-
构建Vue大型应用的10个最佳实践(小结)
这些是我构建大型Vue项目得出的最佳实践,这些技巧将帮助你更高效的编码,并且使其更容易维护和协作. 在我今年的自由职业生涯中我有幸开发了一些大型Vue程序.我所说的这些项目使用了大量Vuex stores
-
建立和维护大型 Vue.js 项目的 10 个最佳实践
目录 1.使用插槽(slot)使组件更易于理解并且功能更强大 2.正确组织您的 Vuex 存储 3.使用操作(Vuex Actions)进行 API 调用和提交数据 4.使用 mapState,mapGetters,mapMutations 和 mapAction 简化代码库 5.使用 API 工厂 6.使用 $config 访问您的环境变量(在模板中特别有用) 7.遵循一个约定来写提交注释 8.始终在生产项目时冻结软件包的版本 9.显示大量数据时使用 Vue 虚拟滚动条 10.跟踪第三方程序包
-
免费稳定图床最佳实践之PicGo+GitHub+jsDeliver 极简教程
目录 一.下载 PicGo 二.图床配置 三.GitHub 接入 3.1 创建仓库 3.2 获取 Token 四.图床使用 一.下载 PicGo PicGo 是啥?顾名思义,它是一个快速上传图片并获取 图片 URL 链接的工具. 目前支持七牛.腾讯云.阿里云和 GitHub 等图床.该工具代码已在 GitHub 开源,读者可以自行去下载. 或者通过网盘下载: 链接: https://pan.baidu.com/s/1HGv88yDJMB9gQWjFxHRzGg 提取码: sjqq 下载完成后,应
-
Go单体服务开发最佳实践总结
目录 单体最佳实践的由来 单体示例 单体实现 API 定义 Download 服务定义 Upload 服务定义 问题来了 定义单体服务接口 生成单体服务 实现业务逻辑 单体开发的总结 项目地址 单体最佳实践的由来 对于很多初创公司来说,业务的早期我们更应该关注于业务价值的交付,并且此时用户体量也很小,QPS 也非常低,我们应该使用更简单的技术架构来加速业务价值的交付,此时单体的优势就体现出来了. 正如我直播分享时经常提到,我们在使用单体快速交付业务价值的同时,也需要为业务的发展预留可能性,我们可
-
webpack配置之后端渲染详解
webpack配置之后端渲染2017年, vue, react, angular 已经占据前端的主流, 不得不承认这也是前端的未来发展方向. 但是后端渲染的开发方式仍然很常见, 不管是个人项目还是商业项目, 后端渲染搞起来真是糙猛快. 但是借着前端发展的东风, 后端渲染也有很大的改进空间. 这里就介绍一下我自己的实践经验: 前后端不分离的情况下实现热加载以及一定程度下的前端主导开发. 这里以koa为例, 但是仓库里也有django版. 理论上所有语言都可以实现. 有兴趣可以看下, 仓库地址在文末