webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

1.安装

• 本地安装

# 安装最新版本
npm install --save-dev webpack
# 指定版本
npm install --save-dev webpack@<version> 
# 使用 webpack v4+ 版本，并在命令行中调试webpack，需要安装webpack-cli
npm install --save-dev webpack-cli

• 全局安装(不推荐)

npm install --global webpack

2.webpack-dev-server

提供了一个基本的web server并且具有live reloading(实时重新加载)功能。

1. 安装

npm install --save-dev webpack-dev-server

2. 配置

module.exports = {
  devServer: {
    // 从什么位置查找文件
    static: './dist'
  }
}

3. 启动

# 自动打开浏览器
npx webpack serve --open
npx webpack-dev-server --open
# 不自动打开
npx webpack-dev-server

3.webpack配置

新建webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口文件
  entry:'./src/index.js',
  // 输出文件
  output:{
    // 输出的文件名
    filename:'bunndle.js',
    // 输出文件夹必须定义为绝对路径
    path: path.resolve(__dirname,'./dist'),
    // 打包前清理 dist 文件夹
    clean:true
  },
  // 开发环境
  mode:'development',
  // 在开发模式下追踪代码 需要将mode设置为development
  devtool:'inline-source-map',
  // 插件
  plugins:[
    // 自动引入资源
    new HtmlWebpackPlugin({
      // 打包生成的文件的模板
      template:'./index.html',
      // 打包生成的文件名称 默认为index.html
      filename:'app.html',
      // 设置所有资源文件注入模板的位置 true|'head'|'body'|false，默认值为 true
      inject:'body'
    })
  ],
  // 模块热更新
  devServer:{
      // 指向的路径
      static:'./dist'

  }
}

4.资源模块

资源模块(asset module)是一种模块类型，它允许我们应用Webpack来打包其他资源文件（如字体，图标等）

• 资源模块类型(asset module type)
  • asset/resource发送一个单独的文件并导出 URL
  • asset/inline 导出一个资源的data URI(默认使用 Base64 算法编码的文件内容)
  • asset/source 导出资源的源代码
  • asset 在导出一个 data URI和发送一个单独的文件之间自动选择

修改webpack.config.js配置

注意

generator中的配置优先级比assetModuleFilename要高

module.exports = {
  output:{
    // 自定义文件输出名
    assetModuleFilename:'images/test.png'
    // 默认配置
    assetModuleFilename:'images/[contenthash][ext]'
  },
  // 配置资源文件
  module:{
    rules:[
      {
        test:/\.png$/,
        type:'asset/resource',
        generator:{
            filename:'images/[contenthash][ext]'
        }
      }
      {
        test:/\.svg$/,
        type:'asset/inline',
      },
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      {
        test:/\.jpg$/,
        type:'asset',
        // webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
        parser: {
            dataUrlCondition: {
                maxSize: 4 * 1024 * 1024  // 最大为4M
            }
        }
      }
    ]
  }
}

5.资源管理

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式‘’

加载css资源

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');    // 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // 使用 cssnano 优化和压缩 CSS
module.exports = {
  module: {
    plugins: [
      // 实例化
      new MiniCssExtractPlugin({
        filename:'styles/[contenthash].css'  // 输出的每个 CSS 文件的名称
      })
    ],
    // 注意将仅在生产环境开启 CSS 优化
    mode:'production', 
    rules: [
      // loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      {
        test:/\.(css|less)$/,
        use:['style-loader','css-loader','less-loader']
      }，
      {
        test:/\.(css|less)$/,
        use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
      }
    ],
    // 优化配置
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()
        ]
    },
  },
};

加载 fonts 字体

module.exports = {
  module: {
    rules:[
      {
        test:/\.(eoff|woff2|eto|ttf|otf)$/,
        // 内置类型，用于处理资源文件（如字体、图像等）
        type:'asset/resource'
      }
    ]
  }
}

加载数据

还可以加载如 JSON 文件，CSV、TSV 和 XML数据资源

• 安装插件

npm install csv-loader xml-loader --save-dev

• 配置

module.exports = {
  module: {
    rules:[
      {
        test:/\.(csv|tsv)$/,
        use:'csv-loader'
      },
      {
        test:/\.xml$/,
        use:'xml-loader'
      },
    ]
  }
}

自定义JSON 模块 parser

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml 、 yaml 或json5 文件作为 JSON 模块导入

• 安装插件

npm install toml yamljs json5 --save-dev

• 配置

const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
module.exports = {
  module: {
    rules:[
      {
        test: /\.toml$/i,
        type: 'json',
        parser: {
            parse: toml.parse,
        },
      },
      {
        test: /\.yaml$/i,
        type: 'json',
        parser: {
            parse: yaml.parse,
        },
      },
      {
        test: /\.json5$/i,
        type: 'json',
        parser: {
            parse: json5.parse,
        },
      },
    ]
  }
}

babel-loader

1. 安装

npm install -D babel-loader @babel/core @babel/preset-env

• babel-loader : 在webpack里应用 babel 解析ES6的桥梁
• @babel/core : babel核心模块
• @babel/preset-env : babel预设，一组 babel 插件的集合

2. 配置

module.exports = {
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['@babel/preset-env']
            }
        }
      }
    ]
  }
}

6.代码分离

代码分离到不同的bundle 中，然后可以按需加载或并行加载这些文件

1. 入口起点

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
    filename: '[name].bundle.js'
  }
}

注意

如果入口 chunk 之间包含一些重复的模块，那些重复模块都会被引入到各个 bundle 中

2. 防止重复

• 入口依赖

配置 dependOn option 选项，这样可以在多个 chunk 之间共享模块

module.exports = {
  entry: {
    index: {
      import: './src/index.js',
      dependOn: 'shared',
    },
    another: {
      import: './src/another-module',
      dependOn: 'shared',
    },
    // 当上面有lodash模块的时候，将lodash模块抽离出来，名字为shared
    shared: 'lodash'
  },
  output: {
    filename: '[name].bundle.js'
  }
}

• 使用SplitChunksPlugin

插件可以将公共的依赖模块提取到已有的入口 chunk中，或者提取到一个新生成的 chunk。

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  optimization:{
    splitChunks:{
      chunks: 'all',
    }
  },
}