webpack的核心概念及使用

        简单来说webpack是一个用于javaScript应用程序的静态模块打包工具。它会从在内部从一个或多个入口 点构建一个依赖图，然后将你的项目的每一个模块组合成一个或多个bundles，他们均为静态资源，用于展示你的内容。

        webpack的核心概念分为：入口、输出、loader、插件、模式、浏览器兼容 、环境。

        入口：

入口起点指示webpack应用使用哪个模块，来作为构建其内部依赖图的开始。可以通过在webpack configuration中配置entry属性，来指定一个（或多个）不同 入口起点。

        单个入口语法：enter.string|[string]

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

       enter属性的单个入口语法：

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

        想要一次注入多个依赖文件，并且将他们的依赖关系绘制在一个“chunk”中时：

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

        输出：

output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。

       在webpack中，output属性最低要求，将他的值设置成一个对象，然后为输出文件名配置一个output.filname:

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

     

  loader:

webpack只能理解javaScript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块。供应用程序使用，以及被添加到依赖图中。也可以使你在import或load加载模块时预处理文件。

在webpack的配置中，Loader有两个属性：

1、test属性，识别出那些文件会被转换。

2.use属性，定义出在进行转换时，应该用哪个loader.

例：

首先安装相对应的loader

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

然后指示webpack的使用

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

        插件：

webpack插件是一个具有apply方法的javaScript对象。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建正在启动！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

需要用到require()，然后把它添加到plugins数组中。多数插件可以通过使用option自定义，也可以在配置文件不同目的的多次使用同一个插件，通过使用new操作符来创建一个插件实例。

另外插件（plugin）与loader的区别：loader用于某类型的模块，而插件则可以执行范围更广的任务。包括：打包优化、资源管理、注入环境变量。

        模块：

在模块化编程中，功能离散的chunk，称之为模块。

模块提供了可靠的抽象和封装界限，使每个模块都具备了条理清晰的设计和明确的目的。

webpack模块就是通过选择development,production或none之中的一个，来设置mode参数，可以启用webpack内置相应环境下的优化。

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

        浏览器兼容性：

Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。

        环境：

Webpack 5 运行于 Node.js v10.13.0+ 的版本