什么是webpack
Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如vue用的是vue-loader当然这是后话，在后面我们再来说。
# 确保已经进入项目目录
# 确定已经有 package.json，没有就通过
npm init
# 创建，直接一路回车就好，后面再来详细说里面的内容。
# 安装 webpack 依赖
npm install webpack webpack-cli --save-dev
# 简单的写法：-_-,缩写形式
npm i webpack webpack-cli -D
# –save：模块名将被添加到dependencies，可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js,（这里你想用什么名字都可以，只需要在打包的时候读取文件为该名字就好，不过，到时候就知道这个名字的含义啦！
html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="app"></h1>
<script src="./dist/bundle.js"></script>
<!-- 注意这里引入的不是我们创建的文件，而是用webpack生成的文件 -->
</body>
</html>
js
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
由于我们将 webpack 安装在了 项目目录。所以是不会向终端写入 webpack 命令的，这时我们可以像 npm script 中加入命令 :
"scripts": {
"start": "webpack entry.js --output-filename=./bundle.js --mode=development"
},
然后我们运行 npm run start,就会执行 webpack entry.js --output-filename=./bundle.js --mode=development。
在浏览器中打开index.html，就能看到我们设置的文字啦！：这是我第一个打包成功的程序
这么简单的功能直接在html中引入不就好了吗？确实是这样的，不过我们这才刚刚开始嘛，不要急。
下面我们再来增加一个文件，名为first.js内容如下：
var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
更改 entry.js:
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");
loader介绍
Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片
Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript。
Loader可以同步或异步执行。
Loader运行在node.js环境中，所以可以做任何可能的事情。
Loader可以接受参数，以此来传递配置项给loader。
Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
Loader可以通过npm发布和安装。
除了通过package.json的main指定，通常的模块也可以导出一个loader来使用。
Loader可以访问配置。
插件可以让loader拥有更多特性。
Loader可以分发出附加的任意文件。
加载 CSS 文件
还是上一篇博客中的文件，来添加一个css文件。style.css,在里面添加
body {
background: red;
}
修改我们的entry.js，原文件不变，添加require("!style-loader!css-loader!./style.css");,用来引入我们的css文件。
扩展名自动绑定loader
这就是我们的loader的使用方式了。如果每次 require CSS 文件的时候都要写 loader 前缀!style-loader!css-loader!这样的东西，显然是一件很麻烦的事情。我们需要它可以根据模块类型（扩展名）来自动绑定需要的 loader。
来看看更简便的方式，将 entry.js 中的 require("!style-loader!css-loader!./style.css")修改为require("./style.css")，可以改变一个背景颜色让你更明显的查看到变化！然后执行：
了解webpack配置
Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
我们现在仅仅需要运行:webpack，如果你的配置没有问题的话，可以在命令行中看到正确的输出，因为这个命令会自动在当前目录中查找webpack.config.js的配置文件，并按照里面定义的规则来进行执行。
上面我们仅仅是使用了这个配置文件，我们肯定想在实际的工作环境中，自我对于项目进行针对性的配置。下面我们就先来简单的了解一下里面参数的意义：
entry：指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。
当然如果你只有一个入口的话，也可以直接使用双引号"./entry.js"
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
了解webpack插件
下面就来看看webpack中的插件：
插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack.config.js中的plugins 选项中指定。
Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。
接下来，我们从一个最简单的，用来给输出的文件头部添加注释信息BannerPlugin的内置插件来实践插件的配置和运行。
修改webpack.config.js，添加 plugins配置项：
var Webpack = require("webpack");//必须引入
module:{
},
plugins: [
new webpack.BannerPlugin("这里是打包文件头部注释！")//注意这是一个数组..
]
加载图片
现在去我们的项目目录中添加img文件夹，添加两张图片，一张大图jpg，一张小图png。
我们已经把webpack的内容了解了一部分了，那么在生产环境中，我不想每一次进行改变，都去命令行中运行我们的webpack的命令，我们应该怎么样实现改变后自动更新呢？
webpack 为我们提供了一个webpack --watch，他会启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
去运行这个命令试试吧！！
在我们改变代码之后，命令行中可以看到直接就自动编译了，但是显然不够智能，还需要我们手动去刷新浏览器，（其实用liveloadhack成自动刷新！）。
我反正不能忍，还要手动刷新浏览器。所以使用webpack-dev-server会是一个更好的办法！
它将在localhost:8080启动一个express静态资源web服务器，并且会以监听模式自动运行webpack，在浏览器打开http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个socket.io服务实时监听它们的变化并自动刷新页面。
后面的讲解大部分都是与vue联用，已经了解webpack大部分概念与操作，也明白了为什么vue-cli命令行
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
