剑客
关注科技互联网

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的安装和基本的使用方法做了介绍。后续我还会更深入地去学习,并将学习过程中的知识点记录下来,希望能和大家一同学习进步。

(本文完)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址