webpack初识

webpack是什么？

前端资源加载/打包工具。根据模块的依赖关系进行静态分析，将模块按照指定的规则生成对应静态资源。将静态资源js\css\less之间的依赖，打包成每个静态文件，减少页面的请求

安装webpack

前提：本地环境支持node.js 使用淘宝镜像
使用 cnmp install webpack -g 安装webpack

weback打包

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

loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
require("./style.css");
document.write(require("./runoob2.js"));
然后执行：

webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'

loader 特性
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：

创建 webpack.config.js 文件，代码如下所示

module.exports = {
    mode:"production", // 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
    entry: "./runoob1.js",
    // entry:{
   //    pageOne: './src/pageOne/index.js',
   //    pageTwo: './src/pageTwo/index.js',
   //    pageThree: './src/pageThree/index.js' 
    }
    output: {
        path: __dirname, //目标输出目录 path 的绝对路径
        filename: "bundle.js" // 用于输出文件的文件名
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('菜鸟教程 webpack 实例')
    ]
};

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

• entry(入口) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中
• output(出口) 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist 基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中
• loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它 们进行处理。
  test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  use 属性，表示进行转换时，应该使用哪个 loader。
• plugins(插件) loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。从打包优化和压缩，一直到重新定义环境中的变量。
  webpack 自带一些插件，你可以通过 cnpm 安装一些插件。使用内置插件需要通过以下命令来安装：
  cnpm install webpack --save-dev
  比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
  想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

mode(模式)

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化