webpack初识

最新推荐文章于 2024-10-02 15:47:16 发布

前进的北极熊

最新推荐文章于 2024-10-02 15:47:16 发布

阅读量140

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/m0_57809042/article/details/129806872

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1 什么是Webpack

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

2 核心概念

入口 - Entry

入口(Entry)是 webpack 分析构建内部依赖图的起点模块(模块就是一个文件)。

// webpack.config.js:
module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口 - Output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

// webpack.config.js:
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    // 输出路径：
    //    --dirname: nodeJs的变量，代表当前文件的绝对路径
    //    resolve: nodeJs里path模块的方法，用来拼接绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'my-first-webpack.bundle.js'
  }
};
复制代码

Loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。

loader的使用：

需要先下载；
无需requrie。

// webpack.config.js:
const { resolve } = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 不同类型的文件必须配置不同的规则来处理
      {
        test: /\.css$/, // 匹配什么样的文件
        // use数组中loader的执行顺序：从下到上，从右到左（后进先出）
        use: [
          'style-loader', 
          'css-loader' 
        ]
      }
    ]
  }
};
module.exports = config;

插件 - Plugins

插件(Plugins)可以用于执行范围更广(比loader)的任务。插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量等。。。

plugin的使用：

需要先下载；
还需requrie。

// webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

模式 - Mode

模式(Mode)指示 webpack 使用相应模式的配置；
mode: 'development' | 'production';
生产环境和开发环境将ES6模块化编译成浏览其能识别的模块化；
生产环境比开发环境多一个压缩js代码；

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWBu54hD-1679932058659)(C:\Users\烟花\AppData\Roaming\Typora\typora-user-images\image-20230326222536687.png)]$

// webpack.config.js:
module.exports = {
  mode: 'production'
};

3 使用webpack

我的webpack版本：“webpack”: “^4.41.6”, “webpack-cli”: “^3.3.11”；

1 不使用配置文件

如果不涉及loader, plugins的配置，可以直接使用命令行打包。

第一步：准备

需要安装 webpack 和 webpack-cli 。

npm i webpack webpack-cli -D
复制代码

第二步：写代码

目录结构：

webpack初体验
├── src
│   └── data.jsson
│   └── index.css
│   └── index.js
复制代码

代码：

// 1. src/index.js
import './index.css'; 
import data from './data.json';

console.log(data);
function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

// 2. src/data.json
{
    "name": "jack",
    "age": 18
}

// 3.src/index.css
html, body {
    height: 100%;
    background-color: pink;
}

这时候打包会报错，因为webpack能处理js/json，不能处理css/img等其他资源。

第三步：打包

项目根目录输入以下命令：

开发环境：
- 命令：webpack ./src/index.js -o ./build/built.js --mode=development；
- 含义：webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js，整体打包环境是开发环境。
生产环境：
- 命令：webpack ./src/index.js -o ./build/built.js --mode=production；
- 含义：webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js，整体打包环境是生产环境。

2 使用配置文件

第一步：准备

与不使用配置文件一样，需要安装 webpack 和 webpack-cli；
还需要安装使用的 loader 和 plugins。

npm i webpack webpack-cli -D

// 下载loader和plugins
npm i xxx-loader xxx-plugin -D

我安装的版本：

style-loader@1.1.3

css-loader@3.4.2

less-loader@5.0.0 -D

less@3.11.1

第二步：写代码

需要在项目的根目录写一个名为webpack.config.js的配置文件。

目录结构：

webpack初体验2
├── src
│   └── index.js
│   └── test.json
├── webpack.config.js
复制代码

代码：

// 1. src/index.js
// 引入样式资源
import './index.css';
import './index.less';

// 2. src/index.css
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}
// 3. src/index.less
#title {
    color: #fff
}

// 4. build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello less</h1>
    <script src="./built.js"></script>
</body>
</html>

// 5. webpack.config.js
const {resolve} = require('path');

module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodehs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            // 不同二年间必须配置不同loader处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上 依次执行
                    // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less
                    'less-loader',
                ]
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: 'development', // 开发模式
    // mode: 'production',
}

第三步：打包

项目根目录中输入命令webpack即可。打包好后，控制台还会显示一些打包相关的信息（打包时一定要先把需要下载的包下载）

4 资源打包

1 打包样式资源

我们通常使用css, less, sass来编写样式，打包不同类型的样式资源也需要使用不同的loader。

用到的loader

.css文件： style-loader, css-loader；
- css-loader：将css文件转换成commonjs模块加载到js中，css代码被转换成了样式字符串。（转换后得到的commonjs模块可以理解为：用js给元素动态添加样式的那种代码）；
- style-loader：创建style标签，将css-loader生成的样式资源插入进去，添加到head中，使样式生效。
.less文件：style-loader, css-loader, less-loader；
- less-loader：将less文件编译成css文件；
- 注：要想less-loader生效，还需要下载less (npm install less -D)。
.scss/.sass文件：style-loader, css-loader, sass-loader；
- sass-loader：将sass或scss文件编译成css文件；
- 注：要想sass-loader生效，还需要下载node-sass (npm install node-sass -D)。

webpack配置

配置loader时，不同的文件需要分开写rule。

// webpack.config.js

const { resolve } = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  },
  plugins: [],
  mode: 'development'
}

2 打包html资源

打包html资源需要使用一个plugin: html-webpack-plugin。

用到的plugin

html-webpack-plugin：我下载的版本html-webpack-plugin@3.2.0

不传参的情况：
- new HTMLWebpackPlugin()：会在配置的output文件夹创建一个空的html, 自动引入打包输出的所有资源，包括js, css…；
- 设置参数template：复制设置的’./src/index.html’文件到配置的output文件夹，并自动引入打包输出的所有资源。

webpack配置

const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: []
  },
  plugins: [
    /**
     * html-webpack-plugin
     *    1) 不传参的情况 - new HTMLWebpackPlugin()：会在配置的output文件夹创建一个空的html, 自动引入打包输出的所有资源，包括js, css...
     *    2) 参数template：复制设置的'./src/index.html'文件到配置的output文件夹，并自动引入打包输出的所有资源
     */
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
  ],
  mode: 'development'

3 打包图片资源

用到的loader

url-loader：用来处理css中的图片资源，但不能处理html中的img标签：
- url-loader基于file-loader运行，所以需下载url-loader 和 file-loader；
- 可以通过options给loader增加配置项（本文仅介绍案例中用到的）：
  - limit: 图片大小限制，不超过的就会被处理成base64；
  - esModule：url-loader默认使用es6解析。设置为false：关闭它的es6模块化，使用commonjs解析;
  - name: 给图片进行重命名。[hash:10] - 取图片的hash的前10位；[ext] - 取文件原来的拓展名。处理html文件的img图片（负责引入img，从而能被url-loader进行处理）：
html-loader：处理html文件的img图片（负责引入img，从而能被url-loader进行处理）：
- 也可以通过options给loader增加配置项：
  - esModule：设置为false：关闭它的es6模块化，使用commonjs解析；

我下载的版本：file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5

webpack配置

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                // 要使用多个loader处理
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 问题：默认处理不了html中img图片
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    // 解析时会出问题：[object Module]
                    // 解决：关闭url-loader的es6模块化，使用commonjs
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

4 打包其他资源

比如，项目中经常会用到的字体图标文件

使用的loader：`file-loader`

webpack配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 写法一：
        // use: ['style-loader', 'css-loader']
        // 写法二：
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        // exclude：命中除了exclude值之外的文件
        exclude: /\.(css|js|html|png|gif|jpg)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

5 开发环境配置 - devServer

1 devServer简单介绍

devServer：开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出（不会在项目中新建一个文件夹）

我的下载版本：webpack-dev-server@3.10.3

如何启动：

npx webpack serve(webpack-cli: 4.x);
npx webpack-dev-server(webpack-cli 3.x);

2 webpack配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: []
  },
  plugins: [],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'), // 项目构建后的路径
    compress: true, // 是否使用gzip压缩
    port: 3000, // 设置端口号
    open: true // 是否自动打开浏览器
  }
}

6 思考和总结

1 打包不同类型的文件

.css文件：style-loader, css-loader;
.less文件：style-loader, css-loader, less-node;（还需安装less）
.scss/sass文件：style-loader, css-loader, sass-loader;（还需安装node-sass）
.html文件：html-webpack-plugin;
图片文件(.png/.jpg/.jepg/.gif等)：url-loader, html-loader;
其他文件：file-loader。

2 配置loader的不同写法

注意到了吗，本文中配置loader用到了不同的写法。总的来说，一个loader如果有options配置，就单独分来写。

module.exports = {
  entry: './src/indes.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 写法一：
        // use: ['style-loader', 'css-loader']
        // 写法二：
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        exclude: /\.(css|js|html|png|gif|jpg)$/,
        // 写法三：
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [],
  mode: 'development'
}

3 思考

以上配置总结

/*
开发环境的配置：能让代码运行
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // loader的配置
            {
                // 处理less资源
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    // 关闭es6模块化
                    esModule: false,
                    outputPath: 'images'
                }
            },
            {
                // 处理html中img资源
                test: /\.html$/,
                loader: 'html-loader',
            },
            // 处理其他资源
            {
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}