最近项目改版,用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. 【有容云】PPT | 容器与CICD的遇见

    编者注:本文为12月21日晚上8点有容云高级咨询顾问蒋运龙在腾讯课堂中演讲的PPT,本次课堂为有容云主办的线上直播Docker Live时代●Online Meetup-第四期:容器与CICD的遇见, ...

  2. 2019上半年总结——Github上那些Java面试、学习相关仓库

    分享一下最近逛Github看到了一些对于Java面试以及学习有帮助的仓库,这些仓库涉及Java核心知识点整理.Java常见面试题.算法.基础知识点比如网络和操作系统等等. 知识点相关 1.JavaGu ...

  3. java学习笔记(中级篇)—java实现高质量图片压缩

    使用java几十行代码实现一个高质量图片压缩程序,再也不用去自己找网络的压缩程序啦!而且很多网上的工具还有水印或者其他的限制,自己动手写一个简单的应用,是再合适不过了. 一.实现原理 1.声明两个字符 ...

  4. CodeForces 938E Max History 题解

    参考自:https://blog.csdn.net/dreaming__ldx/article/details/84976834 https://blog.csdn.net/acterminate/a ...

  5. 一文读懂JS中的原型和原型链（图解）

    讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...

  6. 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉: 小桥流水桂花香,日夜千思万想. 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广. 前言 洛伊安妮·格罗纳女士所著的<学习JavaScript数据 ...

  7. #348 大陆争霸（DIjkstra）

    在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的 克里斯国.两个国家的人民分别信仰两个对立的神:杰森国信仰象征黑暗和毁灭 的神曾·布拉泽,而克里斯国信仰象征光明和永恒的神斯普林·布拉 ...

  8. 前端小知识-css3

    一.实现图片倒影 如图: css属性 .style{ -webkit-box-reflect:below 0 linear-gradient(transparent,white 50% ,white) ...

  9. virtualenv使用和virtualenvwrapper使用笔记

    virtualenv使用笔记 1.安装 pip install virtualenv 2.创建虚拟环境 virtualenv env //对于python2.7,该虚拟环境env必须在英文目录路径下 ...

  10. 关于Python虚拟环境与包管理你应该知道的事

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...