webpack+jquery 组件化、模块化开发的解决方案

binaryTree 发布于2019-08-22 18:04 / 2642人阅读

摘要：基于搭建纯静态页面型前端工程解决方案模板按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新多入口文件，自动扫描入口。它支持和，以及其他的模块系统。

online demo https://jeromehan.github.io/w...

基于webpack搭建纯静态页面型前端工程解决方案模板

按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新

多入口文件，自动扫描入口。同时支持SPA和多页面型的项目

静态资源按需自动注入到html中，并可自动加上hash值

支持js、css、scss等代码检查、打包、压缩混淆、图片转base64等

公用lib组件抽离打包，生成一个公共的bundle文件

功能标识，根据开发/测试环境和生产环境进行不同配置的打包

支持自动部署打包发布远程服务器

支持组件化开发(利用了ejs模版方法)

why webpack？

它和browserify类似 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。

它可以替代gulp和grunt 因为他可以构建打包css、预处理css、编译js和图片等。

它支持AMD和CommonJS，以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。

环境

Node.js

拷贝项目模板

$ git clone https://github.com/jeromehan/webpack-jquery.git

安装依赖

$ cd webpack-jquery

$ npm install

目录结构

    .
    ├── package.json              # 项目配置
    ├── README.md                 # 项目说明
    ├── src                       # 源码目录
    │   ├── index.ejs                # 首页
    │   ├── pageA.html                # 页面A
    │   ├── css/                  # css资源
    │   ├── img/                  # 图片资源
    │   ├── js                    # js&jsx资源
    │   │   ├── index.js              # 主页入口
    │   │   ├── pageA.js              # 页面A入口
    │   │   ├── lib/              # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、React等
    ├── webpack.config.allinone.js    # webpack配置
    ├── webpack.config.js         # 正式环境webpack配置入口
    └── webpack-dev.config.js     # 开发环境webpack配置入口

开发要求

约定/src/*.html为应用的入口文件，在/src/js/ 一级目录下需有一个同名的js文件作为该文件的入口。

编译（测试/dev环境）

$ npm run dev

编译（生产环境）

生产环境会对js混淆压缩，对css、html进行压缩，字符替换等处理

$ npm run build

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95457.html

Vue 2.x 实战之后台管理系统开发（一）

摘要：导语下文实战之后台管理系统开发二该文章将从头到尾梳理我是如何使用开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。构建项目框架准备对于大陆用户，建议将的注册表源设置为国内的镜像，如淘宝镜像，可以大幅提升安装速度。 1. 导语下文：Vue 2.x 实战之后台管理系统开发（二）该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问...

darkbaby123 2019-08-20 16:49 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
[译] Webpack 前端构建集成方案

摘要：现在，让我们创建项目的入口，并使用然后创建我们的配置，文件名为，的配置文件是一个，并且需要成一个对象在这里，告诉那些文件是你应用的入口。代码分割便是用来解决之前所说的单集成模块不可维护的引用的问题。构建工具逐渐成为前端工程必备的工具，Grunt、Gulp、Fis、Webpack等等，译者有幸使用过Fis、Gulp。前者是百度的集成化方案，提供了一整套前端构建方案，优点是基本帮你搞定了...

lewif 2019-08-21 10:52 评论0 收藏0
客服系统从Require.js到Webpack

摘要：客服系统之前都是用进行模块化编程，并使用相应的打包文件，本次迁移成。除了组件化开发打包发布，还有性能优化工程化管理需要考虑，而并不擅长做这些事情，如等。客服系统之前都是用Require.js 2.2.0进行模块化编程，并使用相应的r.js打包js文件，本次迁移成Webpack3.3.0。为什么迁移项目前期，require.js可以很好的解决需求，但是随着项目成长到具有上百个JS文...

zhangyucha0 2019-08-20 19:09 评论0 收藏0
前端相关汇总

摘要：简介前端发展迅速，开发者富有的创造力不断的给前端生态注入新生命，各种库框架工程化构建工具层出不穷，眼花缭乱，不盲目追求前沿技术，学习框架和库在满足自己开发需求的基础上，然后最好可以对源码进行调研，了解和深入实现原理，从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 评论0 收藏0