zoukankan      html  css  js  c++  java
  • 用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配置报错,错误信息不是很明显,出现错误,很不好修复.官方文档也不是很详尽.

  • 相关阅读:
    我的公众号 猫和大叔(maohedashu)
    centos编译php时出现make: *** [sapi/fpm/phpfpm] Error 1
    如何在centos和linux等主机上安装 pstree
    如何在centos下卸载干净nginx
    监控感悟(一)
    ant design vue 获取上传图片的像素
    ant vue中atree默认展开指定的树节点不起作用
    uniapp中组件属性设置不生效的解决方案
    vue+canvas实现简易画板
    ant design vue级联选择懒加载省市区三级数据
  • 原文地址:https://www.cnblogs.com/chengfeng6/p/7767103.html
Copyright © 2011-2022 走看看