webpack初探

2019年8月30日 199次阅读 来源: iceman1212

原文英文版来自webpack官网
demo代码
本文地点

迎接阅读

这是一篇经由过程一个小例子给你引见webpack的文章
你能够经由过程这篇文章相识到：

  • 怎样装置webpack

  • 怎样运用webpack

  • 怎样运用装载器(loaders)

  • 怎样运用开辟效劳器(development server)

装置webpack

你须要先装置node.js。
$ npm install webpack -g

上面这句敕令胜利后，webpack敕令行就能够运用了。

(假如你运转这句敕令失足，能够尝尝$ cnpm install webpack -g。cnpm须要装置)

《webpack初探》

设置，编译

建立一个空文件夹。
在文件夹里先建立两个文件entry.js，index.html
《webpack初探》

  • entry.js

document.write('webpack一般运转');

  • 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
这句敕令行将会编译你的js文件entry.js，并且会建立一个新的js文件bundle.js。
假如编译胜利，将会涌现以下提醒：
《webpack初探》
用阅读器翻开index.html，你能看到webpack一般运转
《webpack初探》

两个js文件

下一步，我们在新的js文件里增加一些代码。

  • content.js

module.exports = "content.js.一般事情";

  • 修正entry.js

// document.write("webpack一般运转");
 document.write(require("./content.js"));

再用下面的敕令行编译一下
$ webpack ./entry.js bundle.js
《webpack初探》
革新你的阅读器，你能够看到笔墨content.js.一般事情
《webpack初探》

webpack将会剖析你的进口文件(entry.js)与其他js文件的依靠关联。这些js文件（也能够成为模块）也会被打包进bundle.js文件。webpack将会给每个模块一个唯一的ID，保存到bundle.js文件，经由过程唯一ID能够访问到。只需进口模块会在实行时被挪用。（进口模块再提到用别的他所依靠的模块）。实行时，只提供必须的要领模块，必要时才实行依靠，挪用依靠模块。 （恕我言语表达能力有点烂，有迷惑的朋侪请移步看我另一篇文章webpack把你的项目编译成了什么）

第一个加载器(loader)

我们想在运用里加一个css文件。
webpack只能处置惩罚Javascript，所以我们须要css加载器(css-loader)去加载css文件。我们还须要款式加载器(style-loader)把css文件运用到style标签内。
运转npm install css-loader style-loader敕令装置这些加载器(loader)。(不须要装置到全局，所以不要-g参数)。这个敕令将会帮你建立一个node_modules文件夹，加载器都在这个文件夹里。

一样也能够运用cnpm install css-loader style-loader。cnpm须要装置)

《webpack初探》

继承：

  • 建立一个style.css文件

body {
    background: yellow;
}

*修正 entry.js文件

   //document.write("webpack一般运转");
  require("!style!css!./style.css");
  document.write(require("./content.js"));

《webpack初探》
从新编译，然后革新阅读器，能够看到页面的背景色为黄色。
《webpack初探》

经由过程前置加载器去要求模块，管道机制处置惩罚模块。这些加载器在特定的体式格局中转变文件内容。这文件被处置惩罚后，末了变成一个JavaScript模块。

绑定加载器

我们不想去写很长的加载代码require("!style!css!./style.css");。
我们能够把文件的后缀名绑定到加载器上，然后我们只须要写：require("./style.css")。

  • 修正entry.js文件

 //document.write("webpack一般运转");
 //require("!style!css!./style.css");
require("./style.css");
 document.write(require("./content.js"));

运转下面的敕令举行编译：
webpack ./entry.js bundle.js --module-bind "css=style!css"
阅读器你能看到一样的效果
《webpack初探》

配置文件

我们能够把敕令行里的参数移到配置文件里：

  • 增加webpack.config.js文件

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

如今我们只须要运转：

webpack

去编译

美丽的输出

跟着该项目标增进，编译能够须要更长的时刻。所以我们要展现一些进度条。我们还想要的色彩…我们经由过程下面敕令行能够做到：

webpack --progress --colors

视察形式

我们不想每一次项目变化都要手动编译……

webpack --progress --colors --watch

webpack能够缓存两次编译之间没有变化的模块和输出文件。

当我们运用视察形式举行编译的时刻。假如检测到任何变动，webpack将再次运转编译。假如检测到某个文件没有转变就启用高速缓存，直接使谁人模块webpack缓存。

开辟效劳器

运用开辟效劳器开辟体验会更好

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

这将在当地启动一个8080端口的效劳，指向静态文件index.html以及bundle.js(bundle自动编译)。每当bundle.js从新自动编译，会自动革新阅读器（经由过程websocket机制）。翻开阅读器 http://localhost:8080/webpack-dev-server/bundle
《webpack初探》

感谢

    原文作者：iceman1212
    原文地址: https://segmentfault.com/a/1190000004142436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞