webpack快速基础

文章目录

  • webpack快速基础
    • 1. 概念
      • 1.1 入口
      • 1.2 输出(output)
      • 1.3 loader
      • 1.4 插件(plugin)
    • 2. 建立项目,用于测试功能
      • 2.1 安装webpack,
      • 2.2 创建webpack配置文件,
      • 2.3 配置package.json,运行项目
    • 3. 配置 mode 开发环境
    • 4. 配置 entry 编译入口
    • 5. 配置 output 编译出口
    • 6. 配置加载css

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配置顺序 从后向前依次处理。

你可能感兴趣的:(webpack,webpack,前端,前端框架)