首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack配置的最佳实践分享

Posted in Javascript onApril 21, 2017

本文主要介绍了关于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="//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配置的最佳实践分享

- Author -

Hi-FE

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 #Javascript
ES6新特性四：变量的解构赋值实例
Apr 21 #Javascript
jQuery+pjax简单示例汇总
Apr 21 #jQuery
利用n工具轻松管理Node.js的版本
Apr 21 #Javascript
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
ES6新特性三： Generator(生成器)函数详解
Apr 21 #Javascript
Cookies 和 Session的详解及区别
Apr 21 #Javascript
丹麦购物网站(22) 意大利购物网站(128) 瑞典购物网站(55) 阿根廷购物网站(9) 比利时购物网站(33) 肯尼亚购物网站(2) 台湾购物网站(77) 法国购物网站(144) 澳大利亚购物网站(309) 挪威购物网站(7)
You might like
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php post换行的方法
2020/02/03 PHP
laravel框架路由分组，中间件，命名空间，子域名，路由前缀实例分析
2020/02/18 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
[00:34]拔城逐梦，热血永恒！2020（秋）完美世界城市挑战赛报名开启
2020/10/09 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
Python函数调用追踪实现代码
2020/11/27 Python
Jo Malone美国官网：祖玛珑香水
2017/03/27 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
体育教师求职信
2014/05/24 职场文书
小学社会实践活动总结
2014/07/03 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
美术教师个人总结
2015/02/06 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
HTML+JS实现在线朗读器
2022/02/15 Javascript