正文
js学习笔记：webpack基础入门（一）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
之前听说过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基础入门（一）
