简单易懂的webpack入门教程(一)

简单易懂的webpack入门教程(一)

初学教程1部分- Webpack介绍Webpack

这是一些相关WebPACK库的东西介绍:

虽然这些库的工具非常好的放在一起,他们不一定适合放在一起学习。

我的情况是,我很困惑,试图了解发生了什么,但是大量的分散资源的理解并取消了我的注意力。

我希望这个教程可以使Webpack易学。

必要条件

至少你要知道Node.js和npm的基础知识。

目录

为什么要学Webpack?

因为每一个react/redux教程都假设我们知道 :cry:

但是往往我们有一些更现实的原因使我们想使用webpack。

可能有这些:

  • 压缩我们的js文件合并成一个文件
  • 在我们的前端代码项目中使用NPM包管理工具
  • 使用ES6/ES7规范书写代码(借助babel)
  • 缩小/优化代码
  • 编译LESS/SCSS成CSS
  • 使用HMR(Hot Module Replacement/实时的模块监听改变)
  • 把任何类型的文件放进我们的javascript中
  • 我们需要了解、掌握更多先进和潮流的技术
为什么我们想要上面这些?
  • 压缩js文件——让我们可以编写模块化的javascript代码,却不需要为把它放进单独的js文件来被单个的<script>标签所引用。(如果我们需要配置多个js文件时)

  • 使用NPM包管理在我们的前端代码项目——NPM是互联网上最大的开源代码生态系统。我们可以试试把写好的代码保存上传到NPM看看,把想要的库放进你的前端项目。

  • ES6/ES7——为javascript增加了很多新特性,使它更具有潜力又容易编写。看看这里的介绍.

  • 缩小/优化代码——减少我们发布文件的大小,就有助于让我们页面更快地加载的。

  • 编译LESS/SCSS成CSS——更好的方式去编写CSS代码。如果你不熟悉可以看这里的介绍.

  • 使用HMR-生产力的提高,每次保存代码的时候,只要他是被引入到该页面那么不需要完整的页面刷新。这在我们编辑代码时候是非常方便的。

  • 把任何类型的文件包含进我们的javascript中——减少其他构建工具的需要,并允许我们用代码的方式修改和使用这些文件。

基础知识

安装

想使用Webpack大多数的功能只需要我们全局安装一下:

npm install -g webpack

然而Webpack的一些功能,比如优化插件,需要我们把它安装到本地。在这种情况下我们需要:

npm install --save-dev webpack

命令行

运行Webpack只需要下面一行命令:

webpack

如果想要Webpack在我们改变文件的同时监听改变并重新构建:

webpack --watch

如果想要使用自定义名称的Webpack的配置文件:

webpack --config myconfig.js

打包

Example 1

Official Dependency Tree

Webpack被正式称为一个模块打包工具。如果你想对模块和模块化打包有深入且易于理解的解释,肯定要看看这两篇文章:here and here. 我们保持它的简单。它的工作方式是,我们制定一个单独的文件为入口点。这个文件将是根节点。然后我们每次都需要引用一个文件都是被添加到节点上的文件。当我们运行Webpack时,所有这些文件会被打包成一个文件。

下面是一个简单的例子:

Dependency Tree

鉴于这张图片,我们可以有目录:

MyDirectory
|- index.js
|- UIStuff.js
|- APIStuff.js
|- styles.css
|- extraFile.js

这可能是你的文件的内容

// index.jsrequire('./styles.css')require('./UIStuff.js')require('./APIStuff.js')// UIStuff.jsvar React = require('React')React.createClass({  // stuff})// APIStuff.jsvar fetch = require('fetch') // fetch polyfillfetch('https://google.com')
/* styles.css */body {  background-color: rgb(200, 56, 97);
}

当我们运行Webpack时,我们将得到一个节点内容的打包,其中没有extraFile.js,虽然文件都在同一个目录,结果却不会打包是因为我们没有引用。

打包的js文件bundle.js将会像这样

// contents of styles.css// contents of UIStuff.js + React// contents of APIStuff.js + fetch

被打包压缩的东西只会是我们在文件中明确要求的东西。

加载器

正如你可能注意到的,我在上面的例子做了依稀奇怪的事情。我引用了一个css文件到我需要的javascript文件中。

这是很酷的,这是Webpack的一桩非常有趣的功能,就是我们可以引用不仅仅只是javascript文件。

这种功能在Webpack中被叫加载器。使用这些加载器,我们可以引用csshtmlpng文件。

如下上面图片中一样,我这样做:

// index.jsrequire('./styles.css')

如果我引用了the style-loaderthe css-loader在我跑得webpack配置,这不仅是完全有效的,而且也会应用css到我的页面中来。

这只是我们可以使用Webpack的许多加载器(loader)的其中一个简单例子。

插件

插件,正如其名,可以为Webpack添加额外的功能。一个经常使用的插件UglifyJsPlugin, 可以缩小你的javascript代码。我们等下会讨论怎么使用。

你的配置文件

Webpack不会在盒子外自动运行,所以你必须按你的需要。为此,你需要创建一个

webpack.config.js

这是Webpack默认的配置名称,如果你选择使用自定义的名称,必须使用 --config来自定该特殊的配置文件名称。

一个小例子

Example 2

你的目录结构是这样的:

MyDirectory
|- dist
|- src
   |- index.js
|- webpack.config.js

然后我们可以使用一个很小的webpack配置:

// webpack.config.jsvar path = require('path')module.exports = {
  entry: ['./src/index'], // file extension after index is optional for .js files
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

我们来一个一个看这些新特性:

  • entry - 打包入口,我们想要打包部分文件。这个配置是一个数组,因为Webpack允许有个入口文件,如果我们想要生成多个打包文件。

  • output - Webpack的输出配置

当我们运行Webpack时,这就会创建一个叫bundle.js的文件在我们的dist文件夹。


回复列表



回复操作






发布时间:2016-04-29 17:54:52

修改时间:2016-04-29 17:58:06

查看次数:869

评论次数:2

TA的文章总数

37