webpack入门(二)
来源:互联网 发布:淘宝页头图片素材 编辑:程序博客网 时间:2024/05/19 13:13
安装
可以用 npm 安装
- 1
注意: 这里全局安装是出于演示的目的。在真实的项目中,建议安装为你的项目依赖。
开始
首先,我们将只使用webpack的命令行界面学习基本webpack 。
新建一个 模块化的javascript 项目
cats.js
- 1
- 2
app.js (入口文件)
- 1
- 2
入口文件就是你项目启动点。也是webpack追踪模块之间依赖关系的入口点。
5秒 打包
给webpack指定一个入口文件(app.js)和输出文件(app.bundle.js)
- 1
webpack将读取和分析入口点及其依赖(包括传递的依赖)。然后它会把它们都打包到app.bundle.js。
现在你打好的包可以跑起来了。 运行一下 node app.bundle.js
,你会发现,哇,你有好多猫。
- 1
- 2
你也可以在 浏览器端使用打好的包。
来点严肃的
webpack是一个非常灵活的模块打包器。它提供了很多高级功能,但并非所有功能都通过命令行界面实现。要获得全部webpack的灵活性,我们需要创建一个 config 文件
项目结构
在真实的webpack项目中,我们会把源文件和打包文件用文件夹分开。在这个例子中,我们把源文件放在src中,把打包后的文件放在bin中。
结构如下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
大千世界,无奇不有。有不少不一样的结构。有些项目用app而不是src,用些用dist 或者 build而不是bin.项目测试学用 test,tests,spec,specs或者把测试文件放在源文件夹一起。
1.创建 bin 和 src 文件夹。
- 1
- 2
2.原始源文件移动到src文件夹
- 1
3.初始化一个新项目。
- 1
4.安装webpack为你的项目开发依赖。这将声明你的项目适用webpack版本。
- 1
迁移到config文件
随着你项目越来越大,你的配置文件也会越来越复杂。从命令行配置webpack就显得很不科学。我们来创建一个配置文件。
1.创建 webpack.config.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
webpack 配置文件是 node 风格的模式。所以您可以运行任何类型的代码,只要一个配置对象,导出了配置模块。
2.在放了配置文件的地方,你可以简单地运行一下 webpack:
- 1
3.运行 bin/app.bundle.js ,你又可以拿到你的猫了
- 1
- 2
你也可以
require
用npm安装过的模块,而不需要额外的配置。
使用loader
webpack原生只支持javascript模式。但是许多人会用像es 2015 ,coffeeScript ,typeScript 等语言。这些语言是可以用的,要用“loader”处理它们。
loader是一种用来加载其它语言到javascript(webapck能够理解)的特殊的模块 。例如,babel-loader
用Babel 加载 ES2015文件。json-loader
加载JSON文件(简单地在前面加上 module.exports=
来把它转换成 CommonJS模式)
。loader可以链式调用,而且你通常需要这么做。例如,yaml-loader
只把 YAML转换为 JSON,因此你需要 把它链到 json-loader
这样就可以用啦。
用 babel-loader
转换 ES2015
在这个例子中, 我们会告诉 webpack 用 babel 跑我们的源码,这样就可以用 ES2015新特性了。
1.先安装 babel 和 预设。
- 1
2.安装 babel-loader
- 1
3.添加 .babelrc
文件来配置 babel 使用 规范。
- 1
4.修改 webpack.config.js
用babel-loader 处理所以 .js文件。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
我们排除 node_modules中的文件,因为要不然的话所有外部库都会通过babel编译,将会降低 编译速度。
5.安装你想用的第三方库。(例如 jQuery)
- 1
这里用 –save 而不是 –save-dev, 是因为这些库在执行时会用到。我们也安装了babel-polyfill 这样在一些老式浏览中可以用 ES2015了。
6.编辑 src/app.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
7.用webpack 打包
- 1
8.添加 index.html,这样app能跑起来。
- 1
- 2
当你打开 index.html 时你应该能看到你的猫了。
有许多不同的loders你可以用在app打包中,包括 css 和 image loader。
用插件
通常你需要在你的打包工作流中做一些额外的事情。一个简单的例子是你会压缩文件来使客户端加载起来更快,这就可以用插件来做。我们将添加 uglify 插件到配置中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
uglify 插件在webpack包中已经包含了,所以你不需要另外添加,但也有可能出现例外。你可以编写自己的自定义插件。在这个例子中, uglify 插件就把文件从1618b压缩到了308b。
- webpack入门(二)
- webpack入门(二)——webpack使用
- webpack入门(二)——webpack使用
- webpack基础入门(二)
- webpack入坑之旅(二)loader入门
- webpack入坑之旅(二)loader入门
- webpack入坑之旅(二)loader入门
- webpack:从入门到真实项目配置(二)
- webpack入门(一)
- webpack入门(三)
- webpack入门(四)
- webpack入门(五)
- Webpack入门(详细)
- webpack入门(1)
- webpack入门(2)
- webpack(二)配置
- Webpack学习(二)
- Webpack 使用(二)
- iOSAPP生命周期
- python:strip()、rstrip()、lstrip()
- C++名字空间详解
- 文件流和转换流乱码
- 初识Linux-Linux下的文件查找(whereis、locate、which、find)
- webpack入门(二)
- jQuery中的.bind()、.live()和.delegate()之间区别分析
- Java开发之Javspring定时器的使用 优就业
- Gradle for Android 第一篇( 从 Gradle 和 AS 开始 )
- CVE-2010-3333浅析-word栈溢出漏洞
- selenuim ide自定义formats
- LVM应用
- 利用VS的代码优化和openmp并行计算提高程序运行速度
- 人月神话读书笔记之二人月神话