js学习笔记:webpack基础入门(一)

时间:2022-02-06 02:20:56

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走:

在这里有:

  • 如何安装webpack
  • 如何使用webpack
  • 如何使用loader
  • 如何使用webpack的开发者服务器

一、安装webpack

你需要之前安装node.js

$ npm install webpack -g

安装成功后,便可以使用webpack命令行了。

ok,开始工作!

二、新建一个空目录,名字为myApp,文件如下

entry.js

document.write("It works.");

index.html文件

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

此时并没有bunble.js文件,我们通过webpack命令来生成:

$ webpack ./entry.js bundle.js

这句命令会编译entry.js文件为新文件bunble.js。如果执行成功的话,会有如下结果:

Version: webpack 1.12.2
Time: 43ms
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,便会看出输出到屏幕上的It works.

三、使用模块的形式,进行简单的模块导出与加载

新建文件:content.js

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

然后,编辑entry.js文件:

var content = require("./content.js");
document.write(content);

然后,继续用webpack进行编译:

$ webpack ./entry.js bundle.js

此时浏览器变回输出It works from congtent.js

webpack会自己分析你的入口文件是否依赖其他文件,这些文件(或者模块)会引入到bundle.js中。webpack会给每个模块一个唯一的id,然后会在bundle.js中保存访问这些模块的id。刚开始的时候只有入口文件被执行,当碰到require的时候就会加载依赖。

四、使用第一个加载器

在目录中新建一个css文件,webpack自己只能处理js文件,需要css-loader来处理css文件,同时也需要style-loader去读取css文件中的样式。

安装这些加载器:

npm install css-loader style-loader

安装完成后,会在目录下多了一个node_modules文件夹,这些加载器就被下载到这里面。

新建style.css文件:

body {
background: yellow;
}

然后编辑入口文件:entry.js

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

此时,重新编译文件,刷新浏览器,会发现背景色变成黄色了。

$ webpack ./entry.js bundle.js

在引入css的时候,我们写了!style!css!,其实也可以不用写,可以将加载器绑定在webpack的命令中:

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

执行webpack后,会搜索当前目录下的webpack.config.js文件,并加载。

以上的配置文件和之前的代码执行的效果相同,只不过是将规则写入到了一个配置中,可以更方便灵活的进行配置。其实配置也很明朗:入口文件、出口文件、加载器。

六、更漂亮的输出结果

之前有输出结果,不够直观,webpack可以通过几个配置项来美化输出结果:

  • 进度条:progress

如果文件很多,我们需要知道当前正在编译哪个文件,还有颜色

webpack --progress --colors
  • 观察模式:watch

所谓观察模式,即监听模式,如果有文件改变,则自动编译:

webpack --progress --colors --watch

七、开发者服务器

所谓开发者服务是启动webpack提供的服务器,所有的测试在该服务器下进行。需要安装webpack-dev-server

npm install webpack-dev-server -g

然后,启动该服务器即可:

webpack-dev-server --progress --colors

此时,会自动启动一个端口为8080的服务器,在浏览器中访问:http://localhost:8080就可以访问了。

如果文件有该改变,代码会自动编译并且自动刷新浏览器。相当于绑定了watch模式。

需要注意的是,访问http://localhost:8080是无法自动刷新的,需要访问http://localhost:8080/webpack-dev-server/bundle,你修改文件,该页面会自动刷新。

原文地址:js学习笔记:webpack基础入门(一)