webpack理解

一、概念

1、webpack是一个静态模块打包器。当webpack用来处理应用程序时，会构建一个模块关系依赖图，其中包含应用程序所需的各个模块，然后将这些模块打包成一个或多个bundle。

2、涉及4个核心概念：

入口entry

出口output

loader

插件

3、入口

入口起点的指示，告诉webpack哪个模块是构建依赖图的开始。进入入口起点后，该模块的直接或间接依赖项将会被处理，输出到bundles中。

默认entry为：./src

module.exports = {
  entry: './path/to/my/entry/file.js'
};复制代码

4、出口

output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这个文件，默认值为./dist。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }复制代码

5、loader

loader可以让webpack去处理那些非js文件（webpack自身只识别js文件）。loader可以将非js文件转化为webpack可以理解的有效模块，利用其打包能力，对这些模块进行处理。

本质上，webpack loader将所有文件转换为关系依赖图（和最终的bundle）可以直接引用的模块。

在更高层面，在webpack配置中loader有2个属性：

（1）test ：告知webpack哪些文件需要被对应的loader转换

(2)use ：用哪个loader进行转换

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;复制代码

6、插件

插件的范围包括，从打包优化到代码压缩，一直到重新定义环境中的变量。

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

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;复制代码

7、模块热替换

模块热替换是在应用程序运行过程中替换，添加或删除模块，而无需重新加载整个页面。