webpack笔记

一、什么是webpack？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。在 webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。

二、webpack核心概念

• 入口(entry)

1. 概念
   指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
2. 配置

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

• 输出(output)

1. 概念
   output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
2. 配置
   在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
   filename 用于输出文件的文件名。
   目标输出目录 path 的绝对路径。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    //1、如果只有一个输出文件
    filename: 'my-first-webpack.bundle.js'   
    //2、有多个 Chunk 要输出时，需要借助模版和变量
    filename: '[name].js',     
  }
};

• 加载器(loader)

1. 概念
   loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"load"模块时预处理文件。
2. 使用loader

配置（推荐）

//test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
//loader：loader的名称（必须）
//示例: 指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

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

内联

//可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。
import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

//这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

• 插件(plugins)

1. 概念
   插件是 webpack 的支柱功能。直接作用于 webpack，扩展了它的功能，目的在于解决 loader 无法实现的其他事。
2. 配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件

const config = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

• 模块热替换(hot module replacement)

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容，以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

参考：
- webpack官方文档
- 入门 Webpack，看这篇就够了