Webpack基础知识

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

---

安装

npm install webpack -g

---

基本配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: ['./fileA.js', './fileB.js']
  },
  output: {
    filename: 'output.js', // 文件名
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

模式[mode]

选项	描述
development	启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。
none	退出任何默认优化选项

Tips: 如果没有设置，webpack 会将 mode 的默认值设置为 production

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

入口[entry]

1.SPA 单页面
2.MPA 多页面

// 情况1
module.exports = {
  entry: './index.js'
};

// 情况2
module.exports = {
  entry: {
    pageA: './pageA.js',
    pageB: './pageB.js'
  }
};

// 情况3
module.exports = {
  entry: ['./fileA.js', './fileB.js']
};

// 情况4
module.exports = {
  entry: {
    main: ['./fileA.js', './fileB.js']
  }
};

输出[output]

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只指定一个 output 配置。

// 情况1
module.exports = {
  output: {
    filename: 'output.js', // 文件名
    path: __dirname + '/dist' // 文件输出路径，必须为系统绝对路径
  }
};

// 情况2
module.exports = {
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。loader 可以将文件从不同的语言转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

//1.安装相对应的 loader
npm install --save-dev css-loader
npm install --save-dev ts-loader

//2.指示 webpack 使用对应 loader
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

插件[plugin]

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};