webpack入门

本来是想看看vue的入门，结果发现vue依赖于webpack，所以只好先来安装webpack，简单了解一下，emmmm，然后，在安装webpack的时候又发现需要安装node.js，需要用到npm，emmmm然后又安装了node。。。。艰辛的前奏貌似才结束（因为还不知道后边又会需要安装什么玩意。。。噗）

安装node.js

网址：https://nodejs.org/en/

1、下载并安装（安装基本就是一直下一步下一步（next）就好，好像也就改了存储地址，再也没改啥，如遇到有更多问题，emmmm，动动大手找找度娘。）

image.png

2、检查

在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

image

输入 node -v 显示node.js的版本 说明已经安装成功
输入 npm -v 显示npm版本说明npm也已经安装成功

说明一下：npm不需要专门安装，Node.js自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

（如安装出现问题，具体问题具体百度，或者重新安装，我自己安装的时候npm安装不合适，重装node后合适了。）

安装完成后的目录如下：

image.png

关于配置环境变量，emmm，新版本都不需要设计环境变量了，软件会自动写入环境变量。旧版本配置的话自行百度吧。。。emmm和java的环境变量配置雷同

3、测试，安装模块

配置完后，打开cmd窗口，输入命令进行模块的全局安装：
比如：我们就安装最常用express模块，命令如下：
npm install express -g
-g是全局安装的意思
(就不上图了，因为忘了截图2333333)

嗯，没错，到这里。。。我们的node安装才差不多结束，如果有小伙伴安装途中遇到什么乱七八糟的问题，动动大手找找度娘。。

安装webpack

安装完node安装webpack就很简单了
依旧【win+R】输入cmd打开命令行，现在我们已经有了npm，所以我们就输入npm install webpack -g 来安装webpack

webpack安装.png

emmm，出来两个WARN，不晓得什么原因，不过百度过之后 说WARN 不影响使用，所以暂时就先不管这两个警告，后边出现问题在解决吧。
安装好webpack之后我们可以输入命令 webpack -h看看是否安装成功，出现结果如下：

webpack命令.png

由于 npm 网址在国外，安装速度慢，我们可以使用淘宝的镜像及其命令 cnpm
输入命令 npm install cnpm -g 安装淘宝镜像
再使用 cnpm 安装 webpack：
使用命令 cnpm install webpack -g安装，其实也就是把刚才npm安装的webpack转移到cnpm的目录下

创建项目

接下来我们简单创建一个目录 app试用一下webpack：
mkdir app
在 app 目录下添加 runoob1.js 文件，代码如下：
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：

接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Version: webpack 3.10.0
Time: 140ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./runoob1.js 28 bytes {0} [built]

浏览器输出

创建第二个 JS 文件

接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示：
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代码如下：
document.write(require("./runoob2.js"));
接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
显示如下

网页显示：

警告！！！：小伙伴敲代码的时候细心点，，，千万别出错了，自己由于粗心路径整错了，找了好久好久找不到 ，求助学长，学长一语点破。。。

webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader。
cnpm install css-loader style-loader -g
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个 style.css 文件，代码如下：

body {
    background: yellow;
}

修改 runoob1.js 文件，代码如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

接下来我们使用 webpack 命令来打包：

在浏览器访问如下

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：
创建 webpack.config.js 文件，代码如下所示：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：

webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。

插件

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。
webpack 自带一些插件，你可以通过 cnpm 安装一些插件。
使用内置插件需要通过以下命令来安装：
cnpm install webpack --save-dev

比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js，代码如下：

var webpack=require('webpack');

module.exports = {
   entry: "./runoob1.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   },
   module: {
       loaders: [
           { test: /\.css$/, loader: "style-loader!css-loader" }
       ]
   },
   plugins:[
   new webpack.BannerPlugin('菜鸟教程 webpack 实例')
   ]
};

然后运行:
webpack

打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。

开发环境

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装 cnpm install webpack-dev-server -g

运行 webpack-dev-server --progress --colors

在浏览器打开 http://localhost:8080/ 输出结果如下：
（emmmm 菜鸟教程输出如下 我的出现问题 解决了再来更新）

image