【前端基础】webpack 概述

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

webpack 是一个静态模块打包器

• 转换
• less/sass/stylus 转换成css
• ES6转换成ES5
• 打包
• html/css/js 代码压缩合并

一、基本使用

1、创建目录

├─dist
└─src

2、初始化，在项目中创建package.json文件

yarn init -y

3、安装依赖包（-D: 记录为开发依赖，上线不需要）

yarn add webpack webpack-cli –D

4、在 package.json 文件中，配置 scripts（默认官方是 webpack.config.js）

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0"
  }
}

5、提供 webpack.config.js

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 入口 entry，从哪个文件开始打包
    entry: './src/main.js',
    // 2. 出口 outputs，打包到哪里去
    output: {
        // 打包输出目录
        path: './dist/',
        // 打包后生成的文件名
        filename: 'bundle.js'
    },
    // 3. 模式 mode，development 未压缩的，production 压缩的
    mode: 'development'
}

6、执行

yarn build

二、使用插件（自动生成html, html-webpack-plug 插件）

2.1、单入口

自动引入 js文件

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 3. 模式 mode，development 未压缩的，production 压缩的
    mode: 'development',

    // ….同上
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html', inject: 'body' })
    ]
}

2.2、多入口

生成2个页面，分别引用不同的js

// 导入模块 path
const path = require('path')

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 入口 entry，从哪个文件开始打包
    entry: {
        './b1': __dirname + '/src/b1.js',
        './b2': __dirname + '/src/b2.js'
    },
    // 2. 出口 outputs，打包到哪里去
    output: {
        // 打包输出目录
        path: path.join(__dirname, 'dist'),
        // 以下目录配置报错
        /**
         * Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
         *  - configuration.output.path: The provided value "./dist/" is not an absolute path!
         *    -> The output directory as **absolute path** (required).
         * error Command failed with exit code 1.
         */
        //path: './dist/',
        // 打包后生成的文件名
        // filename: 'bundle.js'
        filename: '[name]_bundle_[hash].js',
    },
    // 3. 模式 mode，development 未压缩的，production 压缩的
    mode: 'development',

    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/b1.html',
            filename: 'b1.html',
            inject: 'body',
            chunks: ['./b1']
        }),
        new HtmlWebpackPlugin({
            template: './public/b2.html',
            filename: 'b2.html',
            inject: 'head',
            chunks: ['./b2']
        })

    ]
}

代码：https://gitee.com/currention/webpack-demo.git