用webpack构建一个常规项目,好处和坏处分析

最近项目改版,用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配置报错,错误信息不是很明显,出现错误,很不好修复.官方文档也不是很详尽.