webpack入门文档教程

时间 2019-12-01

标签 webpack 入门文档教程繁體版

原文原文链接

webpack 入门教程

欢迎

这个简单的教程会通个一个简单的例子来做为指南。javascript

从中，你能够学到：css

怎么安装 webpack
怎么使用 webpack
怎么使用加载器
怎么使用开发服务器

安装 webpack

首先确保安装了 node.jshtml

$ npm install webpack -g

上面命令确保能够在命令行中使用 webpack 命令java

设定编译

从一个空白文件开始，建立如下文件：node

增长 entry.jsreact

document.write("It works.");

增长 index.htmlwebpack

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

而后执行如下命令：git

$ webpack ./entry.js bundle.js

这将编译 entry.js 并输出为 bundle.js。github

若是一切正常，将输入相似下面的信息：web

Hash: e97678c23acf8ee01956
Version: webpack 1.9.10
Time: 135ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.44 kB       0  [emitted]  main
   [0] ./entry.js 29 bytes {0} [built]

在浏览器中打开 index.html，将展现 It works.。

It works.

第二个文件

下一步，咱们将把部分代码移到另外一个文件中。

增长 content.js

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

更新 entry.js

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

而后编译

$ webpack ./entry.js bundle.js

刷新浏览器，能够看到内容变为 It works from content.js.。

It works from content.js.

webpack 会分析入口文件（entry.js）来找寻依赖文件。这些文件（又称之为模块）会包括到 bundle.js 中。webpack 会给每一个模块一个惟一的 id，而后在 bundle.js 中经过该 id 来访问对应的模块。启动时，只会执行入口模块。一个短小的运行时提供了 require 函数，在引用模块时会执行依赖模块。

首个加载器

咱们但愿在应用中增长一个 css 文件。

由于 webpack 自己只能支持 js，因此须要 css-loader 来处理 css 文件，同时还须要一个 style-loader 来在页面中使用 css 文件里定义的样式。

建立一个空白的 node_modules 目录。

执行 npm install css-loader style-loader 来安装加载器。（由于须要安装在当前应用，因此不须要 -g 参数）

而后具体使用

增长 style.css

body {
    background: yellow;
}

更新 entry.js

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

经过在模块请求前添加加载器，模块将会被加载器管道处理。这些加载器特定的方式来处理文件内容，最终转换后的内容将是一个 javascript 模块。

注：串联起来的加载器将自右向左执行。

绑定加载器

咱们并不但愿写相似这样的代码 require("!style!css!./style.css");。咱们能够给指定的文件后缀绑定加载器，这样只须要写 require("./style.css")。

更新 entry.js

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

而后运行下面的命令来编译

$ webpack ./entry.js bundle.js --module-bind 'css=style!css'

刷新页面，将看到一样的效果。

It works from content.js.

配置文件

把配置选项移到配置文件中

增长 webpack.config.js

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

而后只需执行 webpack 来编译

Hash: 88d0f4710a9d3a391d69
Version: webpack 1.9.10
Time: 263ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.7 kB       0  [emitted]  main
   [0] ./entry.js 76 bytes {0} [built]
   [5] ./content.js 44 bytes {0} [built]
    + 4 hidden modules

webpack 命令会尝试加载当前目录下的 webpack.config.js 文件。

更友好的输出

若是项目变得愈来愈大，编译耗时将会愈来愈长。因此，咱们但愿可以展现一些进度条，同时增长颜色……

这些需求能够经过如下命令来实现

$ webpack --progress --colors

监控模式

咱们并不但愿每个变动都须要去手动编译，则能够经过如下命令来改善。

$ webpack --progress --colors --watch

这样，webpack 会缓存未变动的模块而输出变动的模块。

开启 webpack 监控模式后，webpack 会给全部文件添加用于编译的文件监控。若是有任何变动，将会触发编译。当缓存开启时，webpack 会在内存中保存全部模块内容并在没变动时直接重用。

开发服务器

开发服务器是一个更好的选择

$ npm install webpack-dev-server -g

而后

$ webpack-dev-server --progress --colors

这会在 localhost:8080 提供一个小的 express 服务器来提供静态资源以及自动编译的套件。当有套件从新编译后，会经过 socket.io 来自动更新浏览器页面。在浏览器中打开 http://localhost:8080/webpack-dev-server/bundle 。

webpack-dev-server 使用了 webpack 监控模式，同时也阻止了 webpack 生成结果文件到硬盘，而是直接经过内存来提供服务。