…

介绍 webpack把任何一个文件都看成是一个模块,模块间可以相互依赖(require or import),webpack的功能就是把相互依赖的文件打包在一起.webpack本身只能处理原生的Javascript模块,但是它支持的各种loader转换器可以将各种类型的资源转换成javascript模块.这样任何资源都可以成为webpack可以处理的模块.同时,webpack还有丰富的插件plugin, 可以完成例如js,css的压缩,公共依赖模块的提取和注入,甚至利用模板对html进行动态拼接…

https://doc.webpack-china.org/contribute/writing-a-loader loader是一个导出了函数的node模块,当资源须要被这个loader所转换的时候,这个函数就会被执行,这个函数可以通过this访问loader api.有三种方式来本地开发和测试loader. 设置 测试一个单独的loader,可以通过path.resolve一个本地文件来加载loader: { test: /\.js$/ use: [ { loader: path.resol…

Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource 背景 使用electron-vue的时候,窗体创建后加载页面使用的是loadURL函数,并且传入的参数形如: `file://${__dirname}/index.html` PS:在electron-vue中,编译打包后的__dirname是asar所在绝对地址/dist/electron/. 编译打包后的Electron程序启动时候,发现在调用…

在webpack.config.js中添加如下配置: target: 'node', node: { __dirname: false, __filename: false, } 详见:https://github.com/webpack/webpack/issues/1599…

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器 一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…

接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快速入手的.接地气的.傻瓜式的教程,自己手把手教又太浪费时间.想了一想,决定自己写一篇webpack的傻瓜式教程,旨在教会尚未了解webpack的人迅速入手. 对于webpack的概念.用途.好处等等一律省略,想了解的上网搜索即可,这里直接演示如何新建一个webpack的实例. 1.安装好nodejs…

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档一样.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有大量的cs…

1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进行打包更新 webpack -p #对打包后的文件进行压缩 webpack -d #提供SourceMaps,方便调试 webpack --colors #输出结果带彩色 webpack --profile #输出性能数据,可以看到每一步的耗时 webpack --display-modules #…

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程…

1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打包开发chunk,并支持热替换 可以通过命令打包可发布的chunk 支持路由 路由中的代码实现按需加载 用CommonJs的风格组织代码 代码结构尽量清晰易懂 尽我所能先做出一个满足以上特点的架子吧,最近看完ES6,准备再去看看flux和reduce,看过之后再来思考下前端数据如何管理比较科学规…

文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ago time-1-3:A 使用一键构建工具 (js组件构建) long long ago time-2-1:B 使用工具,long long A ago time-2-2:B 使用兼容工具,long long ago time-2-3:B 使用一键构建工具 (cs样式兼容) 前端正在由蛮荒步入…

前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? 在学习webpack时,也有几个疑问: 1. webpack有哪些常用的插件? 2. 常用的Loader有哪些? 3. 由于运行时是使用编译后,那开发调试怎么办? 在学习webpack后,也剩几个疑问: 1. 为什么用选择webpack? 2. webpack的局限地方,或者不适用场景? webpa…

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,angularjs 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,尤其是即将 release 的2.0版本,号称兼具了 angularjs 和 reactjs 的两者优点.不过现在的官方…

概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-simple模板创建一个简单的示例. 本文的Demo和源…

作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以用webpack来构建项目就成了自然而然的事情.经过一段时间的摸索,各个流程都跑通了,「从入门到放弃」的那点事也就都不算事了. webpack是以模块为中心的打包工具,但由于其日渐丰富的插件,能做的事情已经很多了,从开发环境搭建到上线构建,几乎可以一条龙包办了.事实上我在最近的项目中,连gulp都省…

本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包.文章包含我探索的过程以及webpack在使用中的一些技巧,希望能给大家带来参考价值. 首先,项目打包策略遵循以下几点原则: 选择合适的打包粒度,生成的单文件大小不要超过500KB 充分利用浏览器的并发请求,同时保证并发数不超过6 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包 避免…

上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么webpack能不能处理呢?答案当然是可以.但是由于webpack只能本地处理JavaScript,因此我们需要css-loader来处理css文件,我们还需要style-loader在css文件中应用样式. ps:css-loader会遍历css文件,找到url()表达式然后进行处理.style-l…

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-…

欢迎吐槽 前言 angular.cn教程中用的是systemjs加载器,那用webpack应该怎么配置呢?本文 demo: https://github.com/LeventZheng/angular2-practice-colloection ( 非本人,而是群里大神共享的一份资料,感谢 ).webpack通过这份文件能实现:typescript转码,html.css.图片加载,less支持,区分开发环境,热更新,启动浏览器自动打开. 文件结构 如何引入 // 组件中@Component te…

一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转 换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON. Coffeescript. LESS等. Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则…

webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的解决,最后索性将vue升级到2+,竟然就能识别了,好吧! 1.先分享一下webpack配置vue2+的一些不同(本人亲测): (1)dependencies中的vue默认安装2+,直接运行,会报如下错:[Vue warn]: Failed to mount component: template o…

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入…

写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开发环境 1.安装react语法环境 npm install react react-dom --save 2.安装webpack开发环境 npm install webpack --save-dev 3.安装babel npm install babel-loader babel-core --sa…

文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Webpack编译输出文件的配置过程中,如果需要为文件加入hash指纹,Webpack提供了两个配置项可供使用:hash和chunkhash.那么两者有何区别呢?其各自典型的应用场景又是什么?本文结合笔者工作中遇到的问题,简单记录一下以上问题的解决方案. 1. hash与chunkhash 首先我们先看一…

现如今,webpack非常的受欢迎,比较火的几款js框架都推荐使用webpack来构建项目,而webpack也确实非常强大,但是配置webpack缺常常带来很多问题,接下来就写一下我自己遇到的一些坑. 首先是安装webpack,现在安装模块一般是两种,一种是全局安装,一种是本地安装,全局安装只需要安装一次,但是,全局安装带来一个问题,就是部分模块使用会有问题,比如html-webpack-plugins,老是提示找不到模块,尝试了几种方法,但是都无效,可能我电脑问题.反正本地安装保险,其实每次做…

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = requir…

# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部署: (1),在终端中找到react-build项目的目录,键入cnpm init初始化一个package.json文件,该文件是存放接下来项目用的一些模块, 在终端中根据提交一步步的输入,或者可以直接新建一个package.json文件,文件内容大概如下: { "name": "…

1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机是实现代码分包(Code Splitting )和通过模块化完成代码的无缝集成.webpack可以根据项目需求合并代码,并且支持按需加载. webpack入门,可以参看:petehunt的Webpack howto webpack的实现目标是: 拆分依赖树(dependency tree)为多个按需…

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom…