webpack v1.x使用

来源：互联网发布：linux 粘贴命令编辑：程序博客网时间：2024/05/22 12:57

翻译自 http://webpack.github.io/docs/tutorials/getting-started/

欢迎

这篇简短的教程将通过一个小的示例指导你如何使用webpack。
你将学会：

如何安装webpack
如何使用webpack
如何使用loaders
如何使用development server

安装WEBPACK

你需要提前安装node.js。

$npm install webpack -g

使得webpack命令能够使用

开始编辑

以一个空目录开始。
创建这些文件：

add entry.js

 ``` document.write("It works."); ```

add index.html

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

然后运行下列命令：

$ webpack ./entry.js bundle.js

这将编译你打文件并创建一个捆绑文件。如果成功将显示：

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

在浏览器打开这 index.html，将显示成功运行。

这里写图片描述

第二个文件

接下来，我们将添加一些代码到另外的文件中。

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

刷新浏览器窗口：

这里写图片描述

webpack 将分析你的入口文件所依赖的其他文件。这些文件(称为modules)包含在bundle.js中。webpack将为每个model分配一个独一的id，并将所有的model保存在bundle.js中通过id访问。启动时只有入口model才会被执行。在短暂的运行时间里提供需要的功能和执行依赖

第一个Loader

我们想要添加一个 css 文件到我们的应用中。webpack只能管理JavaScript，所以我们需要css-loader去处理css文件。同样我们需要
style-loader 去应用css文件里的样式。
运行npm install css-loader style-loader去安装这些loader（它们需要安装在本地环境，不需要-g）。这会为你创建一个node_modules 文件夹，loaders将保存在这个文件夹里。

使用它们：

add style.css

body {    background: yellow;}

update entry.js

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

重新编译并刷新浏览器

这里写图片描述

通过在使用model前加上loaders，model经历了一个loader管道。这些loaders以一种特殊的方式转换文件的内容，这些转换被应用后，会生成一个JavaScript模块。

绑定Loaders

我们不想使用如此长的 requers require("!style!css!./style.css");。
我们可以绑定文件扩展名到loaders，从而只需要使用 require("./style.css")

update 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'

一些运行环境可能需要使用双引号: –module-bind “css=style!css”

刷新浏览器

这里写图片描述

配置文件

我们想要将配置选项写入一个配置文件：

add webpack.config.js

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

现在我们编译只需要运行：

webpack

webpack命令行将尝试在当前目录加载 webpack.config.js 配置文件

完美输出

如果该项目编译时会花费很长时间，我们可以显示一个进度条，并带上颜色。我们可以使用

webpack --progress --colors

WATCH MODE

我们不想每次改变后都手工编译

webpack --progress --colors --watch

webpack 在编译时可以缓存未改变的modules并输出文件。

使用watch mode时，webpack在所有文件里安装file watcher，file watcher用于编译的过程。当发现有修改时，就会重新编译。当允许缓存时，webpack会把所有module缓存在内存中，并且会重新使用module如果module未被改变。

DEVELOPMENT SERVER

相比于watch mode，development server更好。

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

它在localhosy:8080绑定了一个小型的服务器，该服务器为你的静态资源和(自动编译)打包后的文件提供服务。当一个包被重新编译时它将自动刷新浏览器界面。

开发服务器使用webpack的watch mode模式，它也可以阻止webpack将结果文件保存到磁盘中，而是在内存中保存结果并提供服务。

阅读全文

0 0