[webpack]-webpack超级详细搭建实用前端环境

前言: webpack 超级实用前端环境搭建 一、我们日常使用的前端开发环境应该是怎样的? 构建我们需要发布的html,css ,js 文件 使用css 预处理器来编写样式 处理压缩图片 使用Bable支持ES新特性 本地提供静态环境开发调试 二、关联HTML webpack 默认从作为入口的 .j ... »

webpack学习用法总结

github源码地址 https://github.com/ghshuo/webpack-demo ## webpack介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图( ... »

webpack下css/js/html引用图片的正确方式

在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助require和es6语法引入 2. 在css/vue组件中引用图片: 照常按照相对路径引用 3. 在 ... »

jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战

利用jenkins自动把服务端打包编译后的代码部署到测试和线上环境,省去了手动整理待发布文件列表的麻烦,也避免了发布文件遗漏的情况。为了提高开发流程质量,科学友好的规范开发流程,我们选择gitlab作为新的代码仓库,通过分支管理和代码review来提高开发效率,减少发布错误。 ... »

前端工程化(二)---webpack配置

导航 前端工程化(一) 工程基础目录搭建 前端工程化(二) webpack配置 前端工程化(三) Vue的开发模式 前端工程化(四) helloWord 继续上一遍的配置,本节主要记录webpack的配置过程 webpack的基础知识可以参照官方文档:webpack中文官网 一些知识点 目前在我的项 ... »

使用webpack打包vue工程

记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自己写了一套适合开发的vue-cli 为了满足业务需要我这里配置了四套环境,打包的时候可以自己根据不同 ... »

前端工程化(一)---工程目录搭建

导航 前端工程化(一) 工程基础目录搭建 前端工程化(二) webpack配置 前端工程化(三) Vue的开发模式 前端工程化(四) helloWord 由于一直在搞后端开发,对于前端内容的掌握一直停留在css、jquery、js、html这类的基础应用上。 一下子接触到前端工程化、spa这类的东西 ... »

webpack

一、webpack是什么? 1.模块化:当你整个项目完成后,将你整个项目模块化. 2.自定义文件或npm i:可以将你自动的css文件,js文件或其他文件模块化,也可以在npm i下载安装的第三方库中文件模块化. 3.静态文件模块化:如果你接触过node,node虽然可以模块化,但不可以将静态文件模 ... »

webpack 4.x 遇到的错误

由于之前重装电脑,很多之前的小Demo 现在都跑不起来。特别是webpack一直在报错。 webpack 安装node 全局安装webpack,webpack cli(一定要全局安装) 项目初始化 webpack init (一路回车) 创建文件index.html main.js 终端输出 web ... »

webpack 4 + mockjs

一、创建项目目录 二、添加开发依赖( html-webpack-plugin、webpack、webpack-cli、webpack-dev-server、webpack-api-mocker) 如下所示位于package.json文件中 使用npm install 或者 yarn install ... »

webpack打包vue项目IE报错,“对象不支持“use”属性或方法”

问题:“对象不支持“use”属性或方法” 最近一个项目在IE10下遇到了问题,在此记录下解决方案。 首先IE下报错“对象不支持xx属性或方法”,意思就是代码中用了某个IE下没有的属性或方法,我们可以查看详细堆栈信息。 可以看到错误具体位置是这个文件的6:112699位置。 由于代码是压缩的,手动格式 ... »

webpack打包性能优化

1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 这样打包出的 css js,会有 css.gz js.gz,即压缩过的 js 和 css。 之后在服务器端的 nginx 配置中开启 gz ... »

从零搭建 webpack3 环境 #1 - 安装使用

目录: (1)什么是webpack (2)webpack核心概念 (3)环境安装 (4)开始使用webpack 1、什么是webpack 官网的一幅图对webpack的解释,从图中可以看出,webpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript模块以及其它的 ... »

走进webpack(2)--第三方框架(类库)的引入及抽离

在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音。那么这篇文章就说说如何用webpack来打包引入第三方框架(类库)。如果单纯的引入jQuery或者其他第三方类库,在打包的时候 ... »

node.js应用脚手架:koa2、sequelize、mysql

自制了一个 nodejs 应用的脚手架。 大致就是以上这些,详细的项目可以去 github 上 clone 下来查看。【传送门】 另外,因为是在做自己博客站点的时候,突然想起来需要一个脚手架,所以才有了这个衍生项目,博客站点的项目还在开发中,稍微多了一点东西。 大致就是这些,详细的可以去 githu ... »

qs.stringify和JSON.stringify的使用和区别

最近在用vue2.x做项目,说实话,项目比较赶不吃力那肯定是假的。这里顺带吐槽一下二线城市东莞,我之前待的城市。深圳很多新技术打得火热,东莞还是有点滞后呐。言归正传,说说 qs.stringify和JSON.stringify qs可通过npm install qs命令进行安装,是一个npm仓库所管 ... »

走近webpack(2)--css打包及压缩js

前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学。 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口和出口文件的配置,并没有更多的去解释其他选项的配置,比如loader,plugin等。那么咱们现在就 ... »