webpack快速基础

webpack快速基础

1. 概念

webpack是现代JavaScript 静态模块打包工具。在打包时它会从一个或多个入口点构建依赖图。然后将你项目中每个模块生成一个或多个bundles, 生成的均为动态资源。

**依赖图：**每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。webpack官网说明。

webpack核心概念为：入口、输出、loader、插件、模式。

1.1 入口

顾名思义，指示webpack使用那个模块作为构建依赖图的开始，webpack会将此文件作为入口构建依赖图。

入口可以有一个或多个，默认为 src/index.js, 可以点开webpack源码看一下。

module.exports = {
    entry: './path/to/my/entry/file.js',
  	// 下面为举例
  	entry: ['src/index.js', 'src/main.js'],
    entry: {
        index: 'src/index.js',
        main: 'src/main.js',
    },
};

1.2 输出(output)

output 告诉webpack 编译生成的所有bundles,资源文件等输出到那个位置，默认是项目根目录的 dist 文件夹。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 配置 output生成坐在的目录
    filename: 'my-first-webpack.bundle.js', // 配置生成文件后 文件的名字。该文件会放到path文件夹下。
  },
};

1.3 loader

webpack只能理解JavaScript与json文件，这时webpack自身的能力，其他的一些文件就需要各种各样的loader来理解解析成webpack可以理解的js或json. 以供webpack将这些资源添加到依赖图中。

loader在webpack配置文件的 module -> rules 节点下配置

loader配置中有两个常用属性 test、use

1. test： 识别出哪些文件会被转换。用正则表达式来匹配
2. use: 定义出在进行转换时，应该使用哪个 loader, use 后是一个字符串数组，数组内是定要使用的loader, 数组顺序一定要确定，webpack会从后往前依次使用loader来转换代码或资源。

例如：txt文件

const path = require('path');

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

1.4 插件（plugin)

loader用于转换某种类型的模块，而插件工作范围更广，例如：打包优化，资源管理，注入环境变量等。

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

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 非常常用的插件，用户生成前端项目的起始页面
const webpack = require('webpack'); // 用于访问内置插件

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

2. 建立项目，用于测试功能

2.1 安装webpack，

先初始化文件夹的npm，npm init

npm i -D webpack webpack-cli #  我的 "webpack": "^5.90.3", "webpack-cli": "^5.1.4"

2.2 创建webpack配置文件,

根目录创建 webpack.config.js，再根目录创建 src/index.js 文件夹与文件

const { Configuration } = require('webpack');

/**
 * @type { Configuration } 指定配置类型，可帮助代码提示
 */
module.exports = {
    mode: 'development',  // 开发模式
    entry: './src/index.js', // 程序入口
}

2.3 配置package.json，运行项目

"scripts": {
    "dev": "webpack --config webpack.config.js"  // 启动脚本 --config 指定webpack启动配置文件
},

src/index.js中写几行代码，运行 dev，查看是否成功，生成的文件到了dist目录下。

3. 配置 mode 开发环境

webpack的mode配置有 development 或 production，

1. development:开放环境开发过程中使用, process.env.NODE_ENV会是 development
2. production：正式打包环境，提供了一些混淆等功能process.env.NODE_ENV会是 production

4. 配置 entry 编译入口

入口必须配置，entry就可配置。一般我们就配置一个入口也就够了

entry: './src/index.js'
entry: ['./src/index.js', './src/index-two.js'] // 可以以数组形式配置多个
entry: {  // 已js对象的形式配置，会编译生成已对象属性名为名字的js文件
   home: './src/index.js', 
   homeTwo: './src/index-two.js'
},

5. 配置 output 编译出口

output: {
   	filename: 'js/[name]-[fullhash:8].js', // 编译输出文件名,前面带 js/:表示生成到js目录下
    path: path.resolve(__dirname, 'dist'), // 编译输出根目录，上面配置的js目录就会生成到这个目录下
    clean: true, // 编译是否清理输出目录。删除旧的文件
}

6. 配置加载css

因为纯webpack只处理js文件，所以我们需要依赖各种loader来处理其他文件，处理css需要使用 style-loader css-loader

下载包后配置，都是在webpack配置文件的 module -> rules 下

    module: {
        rules: [
            {
                test: /\.css$/i,  // test通过 正则表达式匹配需要loader的文件
                use: ['style-loader', 'css-loader'], // use 配置使用的loader，顺序一定要正确。
            }
        ],
    },

webpack在使用loader时是按照use配置顺序 从后向前依次处理。