webpack v1.x使用

最新推荐文章于 2024-07-30 18:36:42 发布

nanotry

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量643

点赞数

分类专栏：前端开发文章标签： node.js

前端开发专栏收录该内容

22 篇文章

订阅专栏

翻译自 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.0
Time: 16ms
    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，将显示成功运行。

这里写图片描述

第二个文件

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

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" }
        ]
    }
};