最近项目改版,用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. RocketMQ中Broker的启动源码分析（二）

    接着上一篇博客  [RocketMQ中Broker的启动源码分析(一)] 在完成准备工作后,调用start方法: public static BrokerController start(Broker ...

  2. [译]Python中的异步IO:一个完整的演练

    原文:Async IO in Python: A Complete Walkthrough 原文作者: Brad Solomon 原文发布时间:2019年1月16日 翻译:Tacey Wong 翻译时 ...

  3. v-text,v-html等区别

    首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等 在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令 ...

  4. pod指定node运行

    1.给node打上label kubectl label nodes cn-hongkong.i-j6c5pm0b59y9kaos565o apptype=monitoring 2.查看结果kubec ...

  5. Activiti6系列（5）- 核心API

    前言 本来想把<疯狂工作流讲义-activiti6.0>这本书里面的实例拿过来,但是这本书我看完后,认为里面编写的activiti6的核心API代码片段不是很清晰,有不少需要雕琢的地方才好 ...

  6. 理解MySQL（一）--MySQL介绍

    一.Mysql逻辑架构: 1. 第一层:服务器层的服务,连接\线程处理. 2. 第二层:查询执行引擎,MySQL的核心服务功能,包括查询解析.分析.优化和缓存,所有跨存储引擎的功能都在这一层实现. 3 ...

  7. 天气预报APP(1)

    一个天气预报APP至少应该具备以下功能: *可以罗列出全国所有的省.市.县: *可以查看全国任意城市的天气信息: *可以自由的切换城市,去查看其他城市的天气: *提供手动更新以及后台自动更新天气的功能 ...

  8. 对博弈活动中蕴含的信息论原理的讨论，以及从熵角度看不同词素抽象方式在WEBSHELL文本检测中的效果区别

    1. 从赛马说起 0x1:赛马问题场景介绍 假设在一场赛马中有m匹马参赛,令第i匹参赛马获胜的概率为pi,如果第i匹马获胜,那么机会收益为oi比1,即在第i匹马上每投资一美元,如果赢了,会得到oi美元 ...

  9. 神盘GCCX，2019必撸大毛！

    自从今年5月转型投资以来,已经很少薅羊毛了! 不是不撸,是因为一般的羊毛我真看不上! 撸羊毛能不能发财,能不能日入几百几千! 答案是,可以! 干羊毛,像趣步,云钱包,云比特,环保币,很多人都发财了!前 ...

  10. python面向对象初始进阶版 通过一道题带你认识面向对象

    定义一个类 class Person: #公共属性 animal='高级动物' soul='有灵魂' language='语言' def init(self,country,name,sex,age, ...