webpack 使用笔记
参考链接：http://www.runoob.com/w3cnote/webpack-tutorial.html
Webpack 是一个前端资源加载/打包工具。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
PS：安装 Webpack 前，你本地环境需要支持 node.js。
PS：webpack4.0以上版本的webpack的脚手架webpack-cli已经被被分离出来了，需要另外安装。
npm install webpack --g
npm install webpack-cli --g
1-1.使用淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
1-2.使用 cnpm 安装 webpack
cnpm install webpack -g
1-3.创建项目app
mkdir app
1-4.在app里面添加 index.html 和 runoob1.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src = "bundle.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
// runoob1.js
document.write("It works.");
1-5.使用 webpack 命令来打包
webpack runoob1.js bundle.js
PS: 如果出现错误，那就使用更加严谨的命令
npx webpack runoob1.js -o bundle.js --mode development
1-6.创建另一个js文件 runoob2.js
module.exports = "It works from runoob2.js.";
1-7.更新runoob1.js文件
document.write(require("./runoob2.js"));
1-8.使用webpack进行打包
npx webpack runoob1.js -o bundle.js --mode development
总结：webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
2-1.LOADER：ebpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
2-2.安装css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
2-3.创建一个 style.css 文件
body {
background: yellow;
}
2-4.修改 runoob1.js 文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
2-5. webpack 命令来打包
npx webpack runoob1.js -o bundle.js --mode development
2-6.访问css和js都被加载。
