webpack getting started

复杂网络621 2016-05-10

展开全文

webpack官方网站getting started地址：http://webpack./docs/tutorials/getting-started/

这个小教程会指导你通过如下简单的例子。

你能够学习到：

1、如何安装webpack

2、如何使用webpack

3、如何使用加载器

4、如何使用开发服务器(development server)

安装webpack

你需要首先安装node.js

$ npm install webpack -g

这回让webpack命令可用。

设置编译

新建一个空的目录。

在这个空目录里面加entry.js文件

文件内容：

document.write("It works.");

添加文件index.html

文件内容

<html>

<head>

</head>

</body>

</html>

然后运行下面的代码：

$ webpack ./entry.js bundle.js

这会编译你的文件同时创建bundle文件

如果成功了，看起来会像下面的样子：

Version: webpack 1.12.11
Time: 51ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

在浏览器中打开index.html页面，它会显示It works.

第二个文件

接下来，我们把一些代码移动到一个额外的文件中。

add `content.js`

module.exports = "It works from content.js.";

update `entry.js`

- document.write("It works.");
+ document.write(require("./content.js"));

使用下面的命令编译：

$ webpack ./entry.js bundle.js

刷新你的浏览器，你会看到文本：It works from content.js

webpack 会分析你的入口文件来得到其他依赖的文件。这些文件也包括bundle.js. webpack会给每一个模块一个唯一的id, 同时在bundle.js文件中可以访问到所有其他的模块。只有入口文件在启动的时候会执行。一个小的runtime提供了require函数，当required其他文件的时候，会执行依赖的文件。

第一个加载器

我们想添加css文件到我们的应用中。

webpack可以只处理JavaScript应用，所以我们需要css-loader来处理CSS文件。我们也需要style-loader来应用CSS文件中的样式。

运行npm install css-loader style-loader来安装加载器。(他们需要本地安装，不使用-g命令) 这将会创建一个node_modules文件夹，在这个文件夹中，加载器会起作用。

让我们来使用它们：

add `style.css`

body {
    background: yellow;
}

update `entry.js`

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

编译并刷新你的浏览器，你会看到网页添加了黄色的背景。

一个配置文件

我们想把上面的配置选项添加到配置文件中去：

add `webpack.config.js`

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

现在我们只需要运行下面的命令来编译:

webpack

得到的结果想下面这样:

Version: webpack 1.12.11
Time: 379ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.7 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 8.86 kB [rendered]
    [0] ./tutorials/getting-started/config-file/entry.js 65 bytes {0} [built]
    [1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
    [2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 201 bytes {0} [built]
    [3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
    [4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
    [5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]