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

用webpack构建一个常规项目,好处和坏处分析的更多相关文章

  1. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  2. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  3. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  4. 现代前端库开发指南系列（二）：使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  5. 快速构建一个vue项目

    首先介绍一下命令行构建一个vue项目步骤: 1.下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功. 2.命令行界面输入:cnpm inst ...

  6. Eclipse的maven构建一个web项目，以构建SpringMVC项目为例

    http://www.cnblogs.com/javaTest/archive/2012/04/28/2589574.html springmvc demo实例教程源代码下载:http://zuida ...

  7. springboot：快速构建一个springboot项目

    前言: springboot作为springcloud的基础,springboot的热度一直很高,所以就有了这个springboot系列,花些时间来了解和学习为自己做技术储备,以备不时之需[手动滑稽] ...

  8. jenkins构建一个maven项目[五]

    标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 构建一个maven项目,即为构建java项目.模拟实验之前先把实验代码推送到 ...

  9. 使用maven构建一个web项目

                          使用maven构建一个web项目     首先建立一个maven项目(关于环境配置上节有详细过程): 1)-->右键new,-->project ...

随机推荐

  1. unimrcp-voice-activity语音检测

    研究 unimrcp有一段时间了,其中unimrcp voice acitve的算法,是遭到大家频繁吐槽.今天我们简单的介绍一下unimrcp voice activity 的这个简单粗暴的算法: u ...

  2. 2019中山纪念中学夏令营-Day9[JZOJ]（第六次模拟赛）

    Begin (题目的排序方式:Unkown其实是按心情排的) 异或:(摘自百度百科) 异或(xor)是一个数学运算符.它应用于逻辑运算.异或的数学符号为“⊕”,计算机符号为“xor”.其运算法则为: ...

  3. C++实现多组数据合并输出

    思路 假设有多组数据,每一组都是按从小到大的顺序输入的,设计如下数据结构 前面一列是每一组数据的首部,后面是真正的数据,首部的定义为: struct head { Node* next; head* ...

  4. SpringBoot分布式：Dubbo+zookeeper

    西部开源-秦疆老师:SpringBoot + Dubbo + zookeeper 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 基础知识 ...

  5. Java学习|Exception和Error有什么区别？

    典型回答:      Exception和Error都继承了Throwable类,java中只有Throwable类型的实例才能被Throw(抛出)或者catch(捕获).      Exceptio ...

  6. k8s学习笔记

    9.deployment:声明式的升级应用 9.1.使用RC实现滚动升级 #kubectl rolling-update kubia-v1 kubia-v2 --image=luksa/kubia:v ...

  7. 004——Netty之高性能IO(Reactor)

    一.原始方式 方法一: # 使用while循环,不断监听端口是否有新的套接字链接 while(true){ socket = accept(); handle(socket) } # 做法局限:处理效 ...

  8. websql操作类封装

    在之前,我写了一个websql的封装类库,代码如下: (function(win) { function smpWebSql(options){ options = options || {}; th ...

  9. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

  10. 蔡勒(Zeller)公式及其推导：快速将任意日期转换为星期数

    0. 本文的初衷及蔡勒公式的用处 前一段时间,我在准备北邮计算机考研复试的时候,做了几道与日期计算相关的题目,在这个过程中我接触到了蔡勒公式.先简单的介绍一下蔡勒公式是干什么用的. 我们有时候会遇到这 ...