webpack

这东西想要学习好多次，但是都没有坚持啊学完，现在还是一头雾水，整备找教程学，但是好像和当前版本差别比较大，算了，这次跟着官方文档学，能学多少学多少。

概念

• js程序的静态模块打包器，递归构建依赖关系图，其中包含程序包含的模块，把模块打包成一个或者多个bundle（捆，束缚）
• 高度可配置，灵活性高
• 四个核心概念 入口 输出 loader 插件

入口（entry）

简单，就是webpack从哪个模块开始构建依赖和打包，找相关依赖打包到dunles

**单个入口的写法** 
*entry: string|Array<string>* 就是entry：字符创或者字符串数组
要在**webpack.config.js**里面写

module.exports = {
  entry: './path/to/my/entry/file.js'
};
module.exports = config;

简写就不导出了

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

tip 当你向 entry 传入一个数组时会发生什么？
向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。
chunk：n.厚块; 部分; 相当数量; 知识块
v.将…分成数份; 将…组合; 发出“砰啷”(或“嚓卡”)声; 抛; 扔; 切分; 切割
简单说 就是多个入口一起构建模块依赖，用字符串数组给多个入口，将会创建多个主入口，一起一来到chunk

对象语法复杂，但是使得入口定义可扩展

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

app与vendor（第三方库）分离，创建的依赖图也彼此分离、相互独立

多页面应用程序
webpack 需要 3 个独立分离的依赖图
多页面应用，页面跳转，页面重新加载新文档，并且资源被重新下载

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出（output）

• 控制如何向硬盘写入编译文件，多个入口也只能指定一个输出

const config = {
  output: {
  //输出文件的文件名
    filename: 'bundle.js',
    //输出目录的绝对路径
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

配置多个chunk，则使用占位符确保每个文件具有唯一的名称

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

模式（mode）

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

module.exports = {
  mode: 'production'
};

• development
• 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin
• production
• 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin
  

loader

• loader 用于对模块的源代码进行转换
• 在import或者加载模块是预处理文件，不同语言文件转换为js，内联图像转换为 data URL
• 安装
• 使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：
webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

• loader 三种使用方式
• 配置 在 webpack.config.js 文件中指定 loader。
• 内联 在每个 import 语句中显式指定 loader。
• CLI 在 shell 命令中指定它们。

配置

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

内联

• 使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

webpack --module-bind jade-loader --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 能够产生额外的任意文件。

解析loader

• loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析插件（plugins）
• loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写

====
说是webpack能从入门到精通
webpack就是静态模块打包器

entry入口 output出口 loader非js的翻译官 pligins范围更广的任务 mode开发模式和生产模式

github
笔记