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

转载于:https://www.cnblogs.com/chengfeng6/p/7767103.html

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

构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
jenkins构建一个maven项目[五]
标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流构建一个maven项目,即为构建java项目.模拟实验之前先把实验代码推送到 ...
不借助idea开发工具构建一个Javaweb项目
不借助idea开发工具构建一个Javaweb项目目录结构 webappsroot|----------WEB-INF|----------classes(存放字节码)|----------lib(存 ...
如何使用 IntelliJ IDEA（2020.2）构建一个JavaWeb项目
如何使用 IntelliJ IDEA(2020.2)构建一个JavaWeb项目针对 IntelliJ IDEA 2020.2 这个新版本,不管是在创建项目上,还是在进行一些选项的配置上,与之前的版本 ...
IDEA快速构建一个SpringBoot项目
IDEA快速构建一个SpringBoot项目 1.new一个Spring Initialiar 项目 2.设置项目名字等 3.选择依赖,随便选几个就行,后面再到POM加依赖就行 4.POM文件加依赖, ...
不借助vue-cli，自行构建一个vue项目
前言: 对于刚刚接触vue的同学来说,直接用官方的构建工具vue-cli来生成一个项目结构会存在一些疑惑,比如: .vue组件为什么可以写成三段式(tempalte.script.style)? ...
图解使用Ant构建一个Java项目
先下载ant,解压到一个目录:添加环境变量ant_home,把ant的bin目录添加到path环境变量: 完成之后检查一下,在命令行输入ant,出现找不到build.xml的提示:表示ant安装配置好 ...
使用express+webpack搭建一个小项目
本项目想实现一个小网站, css方面:带reset.css,能使用sass语法: js方面:能使用es6语法: 模板方面:有可继承的模板,公用部分可提取公用的模板: 项目实现热启动: 实现思路: 使用 ...
基于springcloud构建一个web项目
日子还很长,技术沉淀得一步步的来.先会用,然后再看实现原理本篇博客有点长,个人觉得还是比较细致,希望对入手spring cloud的朋友能有所帮助本来一直都想实践一下zookeeper的,但是看了 ...

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

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

最新文章

热门文章