webpack
lijc_boke
热爱前端的小伙子
展开
-
webpack实战
webpack实战阅读目录一:什么是webpack? 他有什么优点?二:如何安装和配置三:理解webpack加载器四:理解less-loader加载器的使用五:理解babel-loader加载器的含义六:了解下webpack的几个命令七:webpack对多个模块依赖进行打包八:如何独立打包成样式文件九:如何打包成多个资源文件十:关于对图片的打包十一:React开发神器:react-转载 2016-11-10 15:57:55 · 279 阅读 · 0 评论 -
2.8 CommonJS 规范
CommonJS 规范CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目,比如在服务器和桌面环境中。这个项目最开始是由 Mozilla 的工程师 Kevin Dangoor 在2009年1月创建的,当时的名字是 ServerJS。我在这里描述的并不是一个技术问题,而是一件重大的事情,让大家走到一起来做决定,迈出第一步,来建立一个更大更酷的东原创 2016-12-05 17:48:30 · 200 阅读 · 0 评论 -
2.7 故障处理
故障处理Webpack 的配置比较复杂,很容出现错误,下面是一些通常的故障处理手段。一般情况下,webpack 如果出问题,会打印一些简单的错误信息,比如模块没有找到。我们还可以通过参数--display-error-details 来打印错误详情。$ webpack --display-error-detailsHash: a40fbc6d852c51fceadbVersion原创 2016-12-05 17:47:46 · 360 阅读 · 0 评论 -
2.6 开发环境
开发环境当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。$ webpack --progress --colors如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。$ webpack --progress --color原创 2016-12-05 17:47:17 · 160 阅读 · 0 评论 -
2.5 插件
插件插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。接下来,我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行,这个插件的作用是给输出的文件头部添加注释信息。修改 webpack.config.js原创 2016-12-05 17:36:56 · 546 阅读 · 0 评论 -
2.4 配置文件
配置文件Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。继续我们的案例,在根目录创建 package.json 来添加 webpack 需要的依赖:{原创 2016-12-05 17:36:04 · 267 阅读 · 0 评论 -
2.3Loader
LoaderWebpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。先来看看 loader 有哪原创 2016-12-05 17:35:32 · 191 阅读 · 0 评论 -
2.2使用
安装首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js。用 npm 安装 Webpack:$ npm install webpack -g此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。通常我们会将 We原创 2016-12-05 17:34:15 · 195 阅读 · 0 评论 -
2.1安装
安装首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js。用 npm 安装 Webpack:$ npm install webpack -g此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。通常我们会将 Webpack 安装到项原创 2016-12-05 17:33:28 · 207 阅读 · 0 评论 -
2.9 AMD 规范
AMD 规范AMD(异步模块定义)是为浏览器环境设计的,因为 CommonJS 模块系统是同步加载的,当前浏览器环境还没有准备好同步加载模块的条件。AMD 定义了一套 JavaScript 模块依赖异步加载标准,来解决同步加载的问题。模块通过 define 函数定义在闭包中,格式如下:define(id?: String, dependencies?: String[], fact原创 2016-12-05 17:49:02 · 185 阅读 · 0 评论