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.html

entry.js

。下面通过webpack将js文件打包

$ webpack ./entry.js bundle.js

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

Hash: 196cbf3ce6aab2188c2e

Version: webpack 1.13.3

Time: 38ms

Asset Size Chunks Chunk Names

bundle.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.js

Hash: 41ba4af12b1844d7deaf

Version: webpack 1.13.3

Time: 45ms

Asset Size Chunks Chunk Names

bundle.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-loader

style-loader

。这两个模块可以通过npm进行安装,注意安装到当前目录即可,不要加 -g

$ npm install css-loader style-loader

这个命令会在当前目录下创建一个 node_modules

文件夹,该文件夹包括我们用到的包, css-loader

style-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
到底啦