webpack初探

geekzhou 发布于2019-08-01 14:58 / 2031人阅读

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。

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

欢迎浏览

这是一篇通过一个小例子给你介绍webpack的文章
你可以通过这篇文章了解到：

如何安装webpack

如何使用webpack

如何使用装载器(loaders)

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

安装webpack

你需要先安装node.js。
$ npm install webpack -g

上面这句命令成功后，webpack命令行就可以使用了。

(如果你运行这句命令出错，可以试试$ cnpm install webpack -g。cnpm需要安装)

设置，编译

创建一个空文件夹。
在文件夹里先创建两个文件entry.js，index.html

entry.js

document.write("webpack正常运行");

index.html

然后运行下面这句命令：
$ webpack ./entry.js bundle.js
这句命令行将会编译你的js文件entry.js，并且会创建一个新的js文件bundle.js。
如果编译成功，将会出现如下提示：

用浏览器打开index.html，你能看到webpack正常运行

两个js文件

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

content.js

module.exports = "content.js.正常工作";

修改entry.js

// document.write("webpack正常运行");
 document.write(require("./content.js"));

再用下面的命令行编译一下
$ webpack ./entry.js bundle.js

刷新你的浏览器，你可以看到文字content.js.正常工作

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需要安装)

继续：

创建一个style.css文件

body {
    background: yellow;
}

*修改 entry.js文件

   //document.write("webpack正常运行");
  require("!style!css!./style.css");
  document.write(require("./content.js"));

重新编译，然后刷新浏览器，可以看到页面的背景色为黄色。

通过前置加载器去请求模块，管道机制处理模块。这些加载器在特定的方式中改变文件内容。这文件被处理后，最后变成一个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.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

谢谢

云服务器 GPU云服务器初探webrtc webrtc技术初探初探腾讯云存储网关 SQL存储过程初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49682.html

webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

soasme 2019-08-19 17:12 评论0 收藏0
webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

Lavender 2019-08-28 18:27 评论0 收藏0
gulp和webpack初探

摘要：首先声明一下，和两者关系不大，主要是团队之前一直用构建工具，这几天业务上比较清闲，老大让我学学新的和这些潮流工具，于是草草研究了一天，记一些笔记。最后使用将各个组件打包在一起。首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些潮流工具，于是草草研究了一天，记一些笔记。 gulp...

jhhfft 2019-08-19 18:40 评论0 收藏0
初探Vue之环境搭建

摘要：最近得闲，想总结总结最近在学习上的一些心得，毕竟作为新手多写多练好处多多，话不多说，马上开始前端工程化为开发带来了很多便利，但实际是，环境的配置也要大费周章一番。最近得闲，想总结总结最近在学习Vue上的一些心得，毕竟作为新手多写多练好处多多，话不多说，马上开始！前端工程化为开发带来了很多便利，但实际是，环境的配置也要大费周章一番。我用的是在Node环境下基于webpack来编译打...

hiYoHoo 2019-08-20 14:04 评论0 收藏0