webpack
一条宝鱼
这个作者很懒,什么都没留下…
展开
-
入门 Webpack,看这篇就够了
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走转载 2017-05-16 16:17:49 · 511 阅读 · 0 评论 -
react 项目的一个ie8兼容性问题
相信现在很多人在使用react+webpack做项目,然后通过babel来解决ES6/7的兼容性问题,对于ie8的兼容也有一些经验和方案。不过今天在解决汇金账房的ie8兼容过程中仍然遇到一个坑,同时发现现有资料的一些问题。首先说一下兼容ie8的通用方案,大家一般是按照 Make your React app work in IE8 中的方法去做,网上也会搜到一些方法,比如添加 transf转载 2018-01-05 17:42:24 · 1578 阅读 · 0 评论 -
如何让webpack模块化代码兼容到ie8
需求:网站的所有页面都要跑一个脚本,由于这个脚本的功能有很多,所以考虑使用webpack将其中的每个功能模块化。使用webpack,就自然想到用es6爽一爽吧。为了兼容尽可能多的浏览器,当然坑也一个一个的冒了出来。经过babel编译的代码,在chrome上当然没问题。但是用ie8打开,控制台报错。第一个错,是转出来一个default,被ie8判错,于是在看过知乎上的一个讨论之后,增加了post转载 2018-01-05 17:39:44 · 929 阅读 · 0 评论 -
煦涵说Webpack-IE低版本兼容指南
Webpack,Webpack 是一个前端资源加载/打包工具,现在版本已经 release 到 v2.6.1,今天的文章不直接介绍Webpack的API及使用,而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览器兼容问题做一次总结。PC端项目前端基础技术选型jQuery + ES6 + EJS + Babel + Webpack:jQuery:提供选择器转载 2018-01-05 17:37:46 · 2267 阅读 · 0 评论 -
webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件
配置文件如下/** * Created by oufeng on 2017/5/6. */const webpack = require('webpack');const path = require('path');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.export转载 2017-12-12 15:18:32 · 3246 阅读 · 0 评论 -
利用 webpack 处理开发与线上环境静态资源切换问题
前言webpack,作为一个处理模块加载、资源依赖管理、构建化的工具,已经逐渐成为了前端工程化领域的新贵。其创造性的把每个静态资源归为一个 module(模块)并能被其强大的 loader 所加载的这种方式,成功的开辟了前端工程界的另一大生态。基于其官网文档的完善度较高,这篇文章就不对 webpack 的主要内容做过多的介绍,而是回归到本文的主题,即通过介绍几款 webpack 相关的插件转载 2017-12-12 15:17:14 · 1313 阅读 · 0 评论 -
webpack编译后的文件防止缓存解决方案
场景:项目使用的是后端模版返回首页,首页里面有一个js链接,该链接指向的是使用webpack编译过后的代码。由于编译后的文件名称需要在index.vm 中引入,因此,如果给编译后的index文件加hash值作为文件名的话,由于每次的hash值不一样,没法引用,那么该如何解决js文件的缓存问题呢? 首先,js缓存的原因是因为浏览器会对相同的get请求进行缓存,那么如果我们改变每次请求的名称,其实转载 2017-12-12 15:15:40 · 3732 阅读 · 0 评论 -
webpack 使用心得
前言最近项目中在使用react/redux/koa做一个IM,打包工具自然选择了webpack我主要使用了webpack 的下列功能webpack 打包编译js文件编译js文件支持多入口,版本控制,懒加载js和样式文件都支持热替换,不需要每个简单的修改都要刷新等待复杂的css sprites功能,支持sass 语法支持sourcemap,转载 2017-12-12 11:48:32 · 329 阅读 · 0 评论 -
Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案)。比如,在Webpack编译输出文件的配置过程中,如果需要为文件加入hash指纹,Webpack提供了两个配置项可供使用:hash和chunkhash。那么两者有何区别呢?其各自典型的应用场景又是什么?本文结合转载 2017-12-11 16:57:37 · 394 阅读 · 0 评论 -
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
webpack系列目录webpack 系列 一:模块系统的演进webpack 系列 二:webpack 介绍&安装webpack 系列 三:webpack 如何集成第三方js库webpack 系列 四:webpack 多页面支持 & 公共组件单独打包webpack 系列 五:webpack Loaders 模块加载器webpack 系列 六:前端项目模板-webpack+gulp实现自动构转载 2017-05-17 21:15:45 · 6916 阅读 · 0 评论 -
webpack多页应用架构系列
webpack多页应用架构系列(一):一步一步解决架构痛点:https://segmentfault.com/a/1190000006843916webpack多页应用架构系列(二):webpack配置常用部分有哪些?:https://segmentfault.com/a/1190000006863968webpack多页应用架构系列(三):怎么打包公共代码才能避免重复?:http转载 2017-05-17 21:13:33 · 466 阅读 · 0 评论 -
解决node-sass偶尔安装失败的方法
最近把Node从4.4.4升级到6.9.1版本,但是在执行npm i命令安装三方依赖包的时候出现了node-sass模块安装失败的问题。现在和大家分享下如何解决这个问题的方法分析原因Cannot download "https://hithub.com/sass/node-sass/releases/download/v3.13.0/win32-x64-转载 2017-05-16 17:05:59 · 650 阅读 · 0 评论 -
使用cross-env解决跨平台设置NODE_ENV的问题
在搭建公司新的前端工程的架构中,需要在在package.json的scripts标签下配置一系列命令,如下所示:"scripts": { "clear": "rm -rf build&& mkdir build", "start": "npm run clear&& NODE_ENV=development webpack-dev-server --host 0.0.0.0 -转载 2017-05-16 17:04:46 · 3851 阅读 · 0 评论 -
简单的webpack- 引入bootstrap
Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。本来以为在入口文件内加一行就行:import 'bootstrap/dist/css/bootstrap.css'然后安装依赖:npm i bootstrap u转载 2017-05-16 17:02:14 · 14398 阅读 · 1 评论 -
webpack集成bootstrap进行多页面开发
这篇文章已经过时了,有兴趣的可以看看github上示例工程,其基本思想还是一致的:https://github.com/luqingxuan/JqueryPagesExample webpack还是很有搞头的,再搞搞gulp都不用了。。。最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。 开发人员主要集中在以上三转载 2017-05-16 16:49:52 · 5608 阅读 · 0 评论 -
30分钟手把手教你学webpack实战
30分钟手把手教你学webpack实战阅读目录一:什么是webpack? 他有什么优点?二:如何安装和配置三:理解webpack加载器四:理解less-loader加载器的使用五:理解babel-loader加载器的含义六:了解下webpack的几个命令七:webpack对多个模块依赖进行打包八:如何独立打包成样式文件九:如何打包成多个资源文件十:关于对图片的打包十一:React开转载 2017-05-16 16:39:33 · 416 阅读 · 0 评论 -
webpack之proxyTable设置跨域
为什么要使用proxyTable很简单,两个字,跨域。 在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。如何使用pro...转载 2019-08-27 19:49:33 · 214 阅读 · 0 评论