webpack学习(一)—— 入门

该系列文章主要记录自己的webpack学习的过程。 本文主要内容译自 webpack入门,以一些小的demo对webpack做了简单介绍,每个步骤

该系列文章主要记录自己的webpack学习的过程。

本文主要内容译自 webpack入门,以一些小的demo对webpack做了简单介绍,每个步骤都很简单明了,适合对webpack完全不了解的新手阅读,以对webpack有个基本的了解。

接下来本文将从以下几个方面对webpack做出介绍。

  1. webpack安装

  2. 使用webpack

  3. 使用加载器(loader)

  4. config文件

  5. dev server

webpack安装

我们通过npm的方式来安装webpack,所以,请首先确保你已经安装了npm。最新版本的node中已经集成了npm,如果已安装了node,则无需再单独安装npm,可以通过以下代码来查看你npm的版本。

$ npm -v

如果已经有npm,则可以通过npm的方式安装。为了方便在命令行中直接使用webpack,我们对webpack进行全局安装,如下

$ npm install webpack -g

安装成功后执行如下命令可以看到webpack的版本,支持的参数等。

$ webpack

使用webpack

接下来我们通过一个简单的例子来演示如何使用webpack

首先,创建一个index.html文件,如下

<!doctype html><html> <head> <meta charset="utf-8"> <title>webpack demo</title> </head> <body> <p>webpack demo</p> </body> <script type="text/javascript" src="bundle.js"></script></html>

说明:这里的 bundle.js就是我们打包以后得到的js文件。

然后再创建一个js文件,命名为 entry.js,这个文件将通过webpack打包为 bundle.js。如下:

document.write('this is a demo which shows how to use webpack');

至此,我们的目录中有两个文件: index.htmlentry.js。下面通过webpack将js文件打包

$ webpack ./entry.js bundle.js

执行后可以看到如下内容:

Hash: 196cbf3ce6aab2188c2eVersion: webpack 1.13.3Time: 38ms Asset Size Chunks Chunk Namesbundle.js 1.42 kB 0 [emitted] main [0] ./entry.js 27 bytes {0} [built]

现在目录中已经生成了 bundle.js文件,是打包以后的文件。现在,在浏览器中打开 index.html,可以看到页面显示出 this is a demo which shows how to use webpack

目前,在前端开发过程中,我们通常采用的是组件化开发方式,这样就会对应有很多个js文件,而打包工具的出现则是为了正确处理这些js文件的依赖关系,并生成一个最终的文件,这样,我们最后只需要加载打包以后的文件就可以了,而无须加载许多单个的js文件。接下来我们就试下多个js文件的打包。

新建一个 content.js文件,文件内容如下:

document.write('this is the content from content.js')

entry.js文件修改如下:

document.write(require('./content.js'));

打包,执行 webpack ./entry.js bundle.js;

刷新 index.html页面,可以看到此时其内容已变成 this is the content from content.js

$ webpack ./entry.js bundle.jsHash: 41ba4af12b1844d7deafVersion: webpack 1.13.3Time: 45ms Asset Size Chunks Chunk Namesbundle.js 1.55 kB 0 [emitted] main [0] ./entry.js 40 bytes {0} [built] [1] ./content.js 44 bytes {0} [built]

可以看到,webpack以 entry.js文件为入口,而 entry.js文件又依赖了 content.js,这时webpack就会去加载 content.js,最后生成 bundle.js

使用loader

上面的例子中可以看到webpack可以对js文件进行很好的处理,然而我们的项目中通常需要用到一些css文件对样式进行调整。那如何使用webpack对样式文件打包呢,就需要使用loader。

我们首先需要将css文件以js模块的方式加载进来,然后将这些样式应用到dom上。这两个过程对应两个加载器: css-loaderstyle-loader。这两个模块可以通过npm进行安装,注意安装到当前目录即可,不要加 -g

$ npm install css-loader style-loader

这个命令会在当前目录下创建一个 node_modules文件夹,该文件夹包括我们用到的包, css-loaderstyle-loader

举例:

step1: 新建一个css文件, style.css

body { background: yellow; }

step2: 修改 entry.js如下:

require('!style!css!./style.css');document.write(require('./content.js'));

step3: 打包

$ webpack ./entry.js bundle.js

刷新页面,可以看到背景变为黄色。

!style!css!./style.css指对 style.css文件先使用 css-loader进行处理,再通过 style-loader进行处理。其中 css-loader将css文件进行处理,使其可以作为一个js modules被处理; style-loader则解析当前的样式,并应用到dom上。查看生成的bundle.js可以看到如下代码:

function addStylesToDom(styles, options) { for(var i = 0; i < styles.length; i++) { var item = styles[i]; var domStyle = stylesInDom[item.id]; if(domStyle) { domStyle.refs++; for(var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]); } for(; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j], options)); } } else { var parts = []; for(var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j], options)); } stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts}; } }}...function createStyleElement(options) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; insertStyleElement(options, styleElement); return styleElement;}

以上步骤略显繁杂,每次打包需要指定入口文件和生成文件,且在使用加载器时也需要手动配置,很不方便。为了解决这个问题,我们可以使用配置文件来解决,即本文的第四部分。

webpack.config.js

这个文件设定了打包的配置,webpack会自动根据该文件来打包。一个基本的配置文件如下所示:

module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: //.css$/, loader: "style!css" } ] }};

这里指定了三个参数,包括 entry, output, module,分别对应了入口文件 entry.js,打包生成的文件 bundle.js,以及模块加载器。有了配置文件,则可以直接打包:

$ webpack

webpack还支持实时监测文件的变化,并在页面中体现出来,无须每次修改文件都重新编译。只需要在打包的时候设置为watch模式即可。

$ webpack --watch

dev server

webpack还为我们提供了webpack-dev-server,它是一个小型的基于node的express服务器。利用webpack-dev-server我们可以轻松地启动服务。且webpack-dev-server默认采用的是watch模式,也就是说它会自动监测文件的变化,并在页面做出实时更新,我们不需要每次都重新编译。

安装webpack-dev-server

为了方便在命令行中使用,同样全局安装。

$ npm install webpack-dev-server -g

启动

$ webpack-dev-server

默认为8080端口。

在浏览器中打开 http://localhost:8080/webpack...,可以看到index.html页面。

修改content.js文件的内容,比如将内容修改为 this is another content,保存文件,可以看到 index.html页面自动刷新了。

以上内容对webpack的安装和基本的使用方法做了介绍。后续我还会更深入地去学习,并将学习过程中的知识点记录下来,希望能和大家一同学习进步。

(本文完)

未登录用户
全部评论0
到底啦