<h4>说在前面的话</h4>
之前在学习快速使用react的时候快速的看过webpack的安装和使用，但是没有深究为什么，也很不理解为啥全局安装还需要在文件夹下在安装一次，有点蒙，遂这次就跟着webpack官方文档把全局使用webpack的命令走了一遍。若您已看过或者已是高手请跳过~~
<h4>进入正题</h4>
1、安装webpack：
依赖：webpack依赖于nodeJS,所以安装webpack之前一定要先安装node.js
命令：npm install webpack -g（-g 表示全局安装）
测试：webpack -h/v测试下是否安装成功，安装成功的话会出现版本之类的信息
ps:本人遇到过全局安装了但是命令测试未安装，然后把cmd关掉重新打开测试了才可以
2、编译第一个文件
随便建个文件夹webpackg,，该文件夹下有index.html 和entry.js两个文件
entry.js文件内容如下：document.write("It works.");
index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
下面来运行命令吧：
webpack ./entry.js bundle.js
这个命令的作用是编译entry.js文件并创建新文件bundle.js
成功如图：
编译成功
在浏览器里访问index.html,页面显示it works.
it works.
3、编译第二个文件
新建第二个js文件:content.js,和entry.js同级，内容如下：
module.exports = "It works from content.js.";
entry.js文件内容改为如下：
document.write(require("./content.js"));
运行第二步里面的命令，重新编译，再次访问浏览器，页面显示如下：
works from content.js
ps:webpack会分析入口文件对其他模块的依赖，这些模块也会被包含在bundle.js里面。webpack会给每个模块一个唯一的id,在bundle.js里保存这些模块id的可访问性。启动的时候只有入口文件会被执行。A small runtime provides the require function and executes the dependencies when required.
4、the first loader
需要在应用中加个css文件以存储样式，但是webpck只能自动处理js文件，因此需要css-loader同处理css文件，当然，还需要style-loader 在css文件中去应用这些样式。
运行 npm install css-loader style-loader 命令去安装这两个loaders,这俩需要在当前文件夹下安装，不是-g,这样才能生效
entry.js文件同级添加style.css文件,内容如下：
body { background: yellow;}
entry.js内容更新如下：
require("!style!css!./style.css");
document.write(require("./content.js"));
重新编译后背景应该变成黄色啦，效果如下:
背景是黄色的啦
note:通过前置模块请求的loaders,这个模块会经过loader 管道。这些loaders通过一种特殊的方式转换文件内容。一旦这些转换被应用，结果就是js文件（翻译的有点拗口，不对的请指正）
ps1:未在文件加下安装那俩loaders的报错情况：
no install loaders error in folder
ps2：安装完loaders重新build的error情况:打包css文件出错
build error
出现此错误的原因：node版本太低，直接去官网升级最新版本就好啦。。现在的版本是4.6.1
ps3:安装完最新的node以后，在安装npm的包就报错：npm不是内部命令或外部命令吧啦吧啦。。。，然后就一一尝试下面的方法了：
1）环境变量被覆盖掉啦----------------no
2）重启电脑（作为程序媛，这样真的好笨）---------------no
3）度娘告诉我的答案，去node安装目录下看npm.cmd文件---------------------什么，居然没有这个文件！升级node的时候没有重新安装npm，以为原来的不会被覆盖（神逻辑。。。），得，赶紧重新运行一遍node安装程序，change了这个功能。然后在安装style-loader，ok啦！！（重新安装node以后，所有的安装包都要重新安装）
5、binding loaders
不想写这样的requires:
require("!style!css!./style.css")
可以对loaders绑定文件扩展，写法如下：
require("./style.css")
这样子的话entry.js也得相应修改如下;
require("./style.css");
document.write(require("./content.js"));
而后运行如下编译：
webpack ./entry.js bundle.js --module-bind "css=style!css"
ps:官网说某些环境可能需要使用双引号，没错，我就是要使用双引号的，这里就不贴单引号命令啦，贴下单引号报的错：
命令为单引号的error
编译后显示如下，还是一样的黄色:
一样的黄色
6、a config file
接下来，我们把配置选项移到配置文件里：新建一个和entry.js文件同级的配置文件，命名为webpack.config.js,内容如下：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.css$/, loader: "style!css"}
]
}
};
具体配置项的作用以后在详细讲解，现在我们来直接运行
webpack
编译成功，显示如下：
run success
webpack 命令行会尝试加载当前目录下的webpack.config.js配置文件
7、a prettier output
如果项目的编译时间比较长，希望看到有颜色的进度条，使用如下命令：
webpack --progress --colors
会看到进度百分比哦，列如：54%：3/4 build moudles
8、watch mode
不想每次改变后都重新编译，那就使用下面的命令啦：
webpack --progress --colors --watch
webpack在两次编译之间会缓存没有改变的文件后输出文件
当使用watch mode 时，webpack会给每个文件安装在编译过程中用到的file watcher.如果检测到有任何的改变，都会重新进行编译。如果缓存被激活，webpack会将每个模块都放在内存中，直到这个模块不再被修改变就会重新使用。
9、development server
The development server is even better.
全局安装命令如下:
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
执行完结果如下：
dev-server --colors
这样就在localhost:8080上面绑定了一个小的express server 来服务于本地的静态资源和自动编译的bundle（此处的bundle是magic的，下面会讲到，即包含项目内部所有的文件的虚拟称呼，也可以理解为为了配合bundle.js起的别名）。只要bundle下面的任何一个文件被改动并且重新编译过，dev-server会自动更新访问的页面。（dev server 使用的是webpack的 watch mode.它会阻止webpack把那些结果文件写入磁盘，反而会保存在内存中，通过内存给结果文件提供服务）
现在来按编译的提示来访问，打开
http://localhost:8080/webpack-dev-server,显示如下;
dev-server访问
上面的bundle.js就是编译后的js入口文件啦，下面那个就是magic html for bundle.js，就是别名啦,即将见证奇迹啦。现在，我们点击下面的bundle,页面展示如下：
bundle点进去的页面
我们再从bundle后的webpack-dev-server点进去再看一下：
webpack-dev-server点进去的页面
看到两个页面有啥不一样了么？对的，地址栏和下面那张图多了一个app ready,代表是dev-server代理的，页面会随时刷新。现在打开页面http://localhost:8080/webpack-dev-server/bundle，把样式改为绿色，会看到背景色立即变绿了，而如果页面一开始就是打开的这个http://localhost:8080/bundle，更改了样式为绿色之后背景颜色还是黄色，除非刷新页面，才会变成绿色。。好了，二者的区别已了然。。。。
网友评论