Webpack5(从入门到精通)

最新推荐文章于 2025-09-14 15:51:54 发布

原创

最新推荐文章于 2025-09-14 15:51:54 发布 · 1.1w 阅读

81 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

全面解析Webpack配置与优化，涵盖资源打包、html处理、图片资源管理、样式抽取、压缩及性能提升策略。

这里写目录标题

1、webpack 初体验

全局安装webpack

npm i webpack webpack-cli -g

/*
    index.js:webpack 入口起点文件
    1.运行指令：
      开发环境：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.结论：
      1.webpack能处理js/json资源，不能处理css/img等其他资源
      2.生产环境比开发环境多压缩一个js文件
 */
function add(x,y) {
   
   
    return x+y;
}
add(1,2)

执行打包这个文件，打包成功
在这里插入图片描述

总结： index.js:webpack 入口起点文件

1.运行指令：
开发环境：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.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件

2.打包样式资源

创建webpack.config.js文件（配置文件）

use 数组中顺序执行：从右到左，从上到下

const {
   
   resolve} = require('path');

module.exports = {
   
   
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
   
   
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
   
   
        rules:[

            {
   
   
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
   
   
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]


    },
    // 模式
    mode:'development'
}

3.打包html资源

webpack.config.js文件（配置文件）

plugin 1.下载，2.引入，3.使用

const {
   
   resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
   
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
   
   
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
   
   
            // 复制一个html文件，并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

4.打包图片资源

webpack.config.js文件（配置文件）

需要url-loader 和html-loader

const {
   
   resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
   
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
   
   
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
   
   
        rules:[

            {
   
   
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
   
   
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
   
   
                // 处理图片资源,但是处理不了html中img的路径问题
                test: /\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
   
   
                    limit: 8* 1024,
                    // 关闭es6
                    esModule:false,
                    name:'[hash:10].[ext]' //不重复名字
                },
            },
            {

最低0.47元/天解锁文章