[TOC]1、开发环境准备1.1 安装nodejs首先安装Nodejs，直接去nodejs官网下载，默认会安装Npm，所以这里可以不用单独安装。1.2 使用淘宝Npm镜像由于国内网络原因，如果直接使用Npm安装依赖包会因为网络和墙的原因导致不成功，好在淘宝给我提供了可以使用的镜像，地址是：，按照其【使用说明】将镜像安装好。1.3 IDE准备目前前端开发比较火的IDE是Jetbrain的WebStorm，到其官网下载：，安装后有30天的试用期，如果觉得不爽，可以去网上...
在现在正在开发的项目中，为了实现前后端分离开发，决定使用刚刚发布不久的 vue.js 2.0 和 koa 2.0 来进行开发，深入的使用了webpack作为前端打包工具。为了更好的掌握，打算通过练习来加强对webpack的理解。接下来还会针对开发中相关的技术，做深入的练习，并且写一系列文章。 本文主要目的是对项目开发和自己练习中对webpack的使用，做一个总结。介绍开发vue.js单页面前端应用时，如何使用webpack来打包。本文同时也是之前rea...
批处理 前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用 批处理 对前端构建进行部署 git地址 目录分为三块 single //单页代码 share // 共用代码 many //多页代码只需要用到 批处理 对其中两者进行合并就能生成想要的...
起因 在公司搭建了套webpack多页面应用脚手架，开始用着很爽，解决了既想使用Vue的模块化开发，又想做多页打包上线管理的初衷，但是随着业务项目的增加，我发现npm run dev的时候，每次热加载，webpack的反应都很慢。 基本会卡在 94% assets optimization95% emitting这个步骤很久 准备具体定位一下问题的原因。由于项目基于vue-cli改写的多页应用脚手架，手动重写了HtmlWebpackPlugin插件，所以基本猜测和这个有关，后来证明也真的...
electron是一两年前挺火的一个框架 本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 （当然听说mac上也可以用electron，不过没试过） （没错我还在用windows，不是mac也不是linux，我是个lowB） 团队主要的技术栈是react，所以考虑用react开发，方便维护。 PS.由于项目是大半年前做的，所以一些细节可能记忆有误请见谅 几个重点： 1.想要能调试必须使用we...
简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start） github地址：https://github.com/ivan-GM/Gm-cli 项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli 1，首先创建个文件夹，npm init初始化项目...
webpack同之前的gulp相比，gulp属于非模块化打包工具，webpack属于模块化打包工具，两者的优劣这里不做过多分析（可自行百度）。 目的：是为了分享一下使用过程中，用到的插件、loader、遇到的各种问题以及解决办法，最后会附上最终代码。 在这个项目中，用 webpack打包css、scss、js、图片文件、jquery、第三方插件、字体图标，编译es6、压缩html、压缩js、压缩css ，基本涵盖了常用的东西。 代码结构如下下面单独说几个难点 1、打...
前言最近新起了一个多页项目，之前都未使用 webpack4，于是准备上手实践一下。这篇文章主要就是一些配置介绍，对于正准备使用 webpack4 的同学，可以做一些参考。 webpack4 相比之前的 2 与 3，改变很大。最主要的一点是很多配置已经内置，使得 webpack 能“开箱即用”。当然这个开箱即用不可能满足所有情况，但是很多以往的配置，其实可以不用了。比如在之前，压缩混淆代码，需要增加uglify插件，作用域提升(scope hosting)需要增...
webpack 升级到4之后还没好好的同步一个可实用的webpack架子，接下来用webpack4来搭建一个简单的react的多界面应用，废话不说 直接撸码创建工程$ mkdir demo && cd demo $ npm init -y webpack 配置安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0$ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24....
前言之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架vue 版 spa 脚手架 有兴趣的同学可以看下,内附详细注释,适合刚学习 webpack 的童鞋.react 版 spa 脚手架 但在一些场景下,单页应用显然无法满足我们的需求,于是便有了mulXc-cli 好了,废话不多说,进入正题!!!!文件结构 ├── build 构建服务和webpack配置├──── build.js 构建全量压缩包 (打包项目)├──── setting.js 多页面入口配置├...
Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用，由 Github 主导和开源，大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。 Electron 是 Node.js 和 Chromium 浏览器的结合体，用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI，通过 Node.js 去和操作系统交互。 当你在 Electron 应用中的一个窗口操作时，实际上是在操作一个网页。当你的操作需要通过操作系统去完成时，网页会通过 Node.js 去和操作...
关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js chunk并自动更新md5？本文讲的就是如何解决这些问题。 这里假设你对Webpack已经有最基础的了解 需求来看下我们的需求: 使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html打包成多个html，...
前言 Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用，可是在使用到React和Webpack时，会遇到一些配置问题，本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。 环境配置"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1...
Vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。 Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多...
写这个的初衷是很难找一个简洁的项目脚手架，很多脚手架都有很多依赖，光看依赖就要很久，所以自己参照网上的内容，弄个这么一个简单的多页面的脚手架。 利用creat-react-app 新建一个react应用 npm install -g create-react-app然后创建一个项目 create-react-app democreate-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请用cnpm淘宝镜像安装。然后我们进入项目并启动。 cd dem...