最近项目改版,用webpack重新架构.
些许心得我会写几篇记录一下.
好处如下:
1.ES6语法用起来,babel-loader转义,各种新语法用起来.
2.import 语法写起来,webpack2.0以上版本直接支持.模块化开发大势所趋.写代码变为享受.
import 'pages/liveing/style.scss' import FastClick from 'fastclick' import config from 'configModule' import wx from 'weixin-js-sdk' import '../libs/lib.prototype' import './log.js' import _util_ from '../libs/libs.util'
3.图片直接转base64,减少请求.
4.页面样式 JS调试特别的方便,热更新真的特别好用.
5.支持ejs语法,直接输出静态页面来.公共html模块,可以抽取出来共用.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="hotcss" content="initial-dpr=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="x5-page-mode" content="no-title">
<meta name="format-detection" content="telephone=no">
<meta name="applicable-device" content="mobile">
<link rel="canonical" href="<%= canonical %>"/>
<meta name="Copyright" content="东方体育©版权所有">
<link rel="shortcut icon" href="<%= DIRS.BUILD_FILE.images.favicon %>">
<link rel="bookmark" href="<%= DIRS.BUILD_FILE.images.favicon %>" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="<%= DIRS.BUILD_FILE.images.favicon %>">
<link rel="dns-prefetch" href="<%= HOME_URL %>">
<title><%= pageTitle %></title>
<meta name="keywords" content="<%= pageKeywords %>">
<meta name="description" content="<%= pageDescription %>">
不好的地方:
某些低级浏览器不支持热替换.没办法调试,必须输出代码后调试,这样出现bug,调试很累.
webpack配置报错,错误信息不是很明显,出现错误,很不好修复.官方文档也不是很详尽.