了解webpack

奔跑的小熊6

已于 2023-10-06 21:15:22 修改

阅读量66

点赞数

文章标签： webpack 前端 node.js

于 2023-10-06 21:14:53 首次发布

本文链接：https://blog.csdn.net/qq_44726744/article/details/133621112

版权

该笔记来自B站前端小野森森个人觉得讲的很好，适合想学习webpack的小伙伴的入门视频。所以做个笔记方便自己查看，想看具体操作的小伙伴们可以自己去B站搜或者根据地址查看视频教程链接: https://www.bilibili.com/video/BV12a4y1W76V/?p=18&share_source=copy_web&vd_source=98474adc7775bdcbd30e626224f4833d

webpack

webpack是一个打包工具，是前端项目工程化的解决方案。

核心

entry – 入口
output – 出口
loader – 非js文件处理方式，因为webpack只能识别js和json。在module.rules里定义
plugins – 插件，扩展webpack的功能
mode – development（开发模式） | production（生产模式）

前期准备

初始化项目

npm init y

安装webpack所需环境( -D 是 --save-dev的缩写，起到打包的作用，上线时用不到，所以安装到开发时依赖里面即可。)

npm install webpack webpack-cli -D

新建webpack配置文件 – webpack.config.js

前期了解

bundle – webpack打包出来的文件
chunk – 代码块，由多个模块组合而成
module – 开发中的单个模块，一个模块对应一个文件

1. 为什么使用webpack

提高浏览器运行效率
- 通过script引入js文件一个js文件对应一个http请求，webpack可以把这些js文件通过(ES6 Module)import导入export导出进行模块化开发，并打包成一个js文件，从而达到减少http请求，提高浏览器运行效率的目的。
  还可以通过CommonJS通过module.exports导出require导入进行模块化开发。
解决浏览器兼容问题
- ES6语法 — babel和polyfill
- css3样式 — css-loader

2. 什么是入口和出口

指定webpack打包的入口和出口路径

2.1 单入口文件的配置

// node.js中配置路径的模块，为获取绝对路径做准备
const path = require('path')
module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        // 配置文件出口的存放路径，一般放在dist文件夹下
        path: path.resolve(__dirname, 'dist'),
        // 配置打包文件名称
        filename: 'index.js' 
    }
}

2.2 多入口文件的配置

// node.js中配置路径的模块，为获取绝对路径做准备
const path = require('path')
module.exports = {
    mode: 'development',
    // 属性名会作为打包文件的名称
    entry: {
        index: path.resolve(__dirname, 'src/index.js'),
        main: path.resolve(__dirname, 'src/main.js')
    },
    output: {
        // publicPath: '', 配置html文件script标签src属性值前缀。
        // 配置文件出口的存放路径，一般放在dist文件夹下
        path: path.resolve(___dirname, 'dist'),
        // 利用webpack占位符配置模块名称，项目打包过后dist文件目录下会出现index.js和main.js两个文件
        filename: "[name].js"
    }
}

3. 什么是Plugins

插件，用来扩展webpack的功能。

3.1 常见的插件

html-webpack-plugin – 自动创建html文件
define-plugin – 定义环境变量
uglifyjs-webpack-plugin – 通过UglifyES压缩ES6代码
webpack-parallel-uglify-plugin – 多核压缩，提高压缩速度
webpack-bundle-analyzer – 可视化webpack输出文件的体积
mini-css-extract-plugin – css提取到单独的文件中

3.2 html-webpack-plugin

生成创建html入口文件，不需要自己手动的在打包文件目录下创建html文件并引入js，webpack打包的时候会自动帮助我们去创建html文件，并引入js文件。

安装

npm install html-webpack-plugin -D

使用

const path = require('path')
// 引入配置模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: path.resolve(__dirname, 'src/index.js'),
        main: path.resolve(__dirname, 'src/main.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            //作为html文件的模板,打包生成对的html除了模板的内容，还自动引入了webpack打包出来的文件
            temeplate: './src/index.html',
        })
    ]
}

3.3 clean-webpack-plugin

打包之前不需要去手动清除dist文件目录下的内容，在webpack打包的时候该插件会自动将dist文件内的打包文件清除，并生成新的打包文件。

安装

npm install clean-webpack-plugin -D

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

3. 什么是Loader

加载和解析非js类型的文件。例如css，图片，字体等。

3.1 常见的loader

babel-loader – 将es6代码转为es5代码
style-loader – 将css代码以style标签形式插入到htmll文件中
css-loader – 加载css，支持模块化、压缩、导入等
less-loader – 把less代码转换为css代码
sass-loader – 把scss代码转换为css代码
file-loader – 把文件输出到一个文件夹中，在代码中通过url去引入输出的文件
url-loader – 和file-loader类似，多了一个limit属性，可以在图片很小的情况下将图片转为base64格式将文件注入到代码中去
eslint-loadr – 通过ESlint检查JavaScript代码

3.2 样式文件处理方式

3.2.1 style-loader, css-loader, less-loader, sass-loader

安装

npm install style-loader css-loader less less-loader sass sass-loader -D

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, 
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

3.2.2 postcss-loader

通过autoprefixer插件给不兼容css属性的浏览器自动加上浏览器前缀

安装

npm postcss postcss-loader -D

前期准备

安装postcss插件autoprefixer

npm install autoprefixer -D

创建postcss.config.js文件夹

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

package.json文件中配置浏览器匹配规则

"browserslist": [
    "> 1%",
    "last 2 versions"
]

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                // postcss-loader放在css-loader后
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
                    
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

3.3 图片文件处理方式

3.3.1 使用file-loader处理图片文件

安装

npm install file-loader -D

使用1 — 在dist文件夹下生成hash值名称的图片

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            // 在dist文件夹下生成hash值名称的图片
            {
                //通过正则配置图片匹配规则
                test: /\.png$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

使用2 – 可配置生成图片名称和图片存放位置

module: {
    rules: [
        {
            test: /\.jpg$/,
            usr: {
                loader: 'file-loader',
                options: {
                    //利用webpack占位符配置图片名称和类型，图片名称和类型不变。
                    name: "[name].[ext]",
                    // 在dist文件目录下添加images文件夹，存放符合上述条件的图片
                    outputPath: 'images/'
                }
            }
        }
    ]
}

3.3.2 使用url-loader处理图片文件

安装

npm install url-loader -D

使用1 - 默认生成base64的图片文件注入到文件代码中，可以减少图片的http请求

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            // 默认生成base64格式的图片
            {
                test: /\.jpg$/,
                loader: 'url-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

使用2 – 图片过大会阻碍js文件的执行，通过limit配置图片转换规则

module: {
    rules: [
        {
            test: /\.jpg$/,
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                //小于2kb的图片将会转为base64格式去处理
                limit: 2000
            }
        }
    ]
}

3.4 使用Babel处理es6语法

安装

npm install babel-loder @bebel/core @babel/preset-env -D

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
modele.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // 翻译es6的代码
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                // 只在src文件下查找
                include: [path.resolve('src')],
                // 不会去查找node_modules下的文件
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new CleanWebpackPlugin()
    ]

}

扩展，使用polyfil补充es6代码的实现
因为程序上线也需要该依赖，所以需要通过-S(–save缩写)去安装该依赖

npm install @babel/polyfill -S

直接在项目文件中引入

import '@babel/polyfill'
module.exports = {
    module: {
        rules: [
            {
                test: '/\.js$/',
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/presets-env',
                                // 打包文件只会处理使用的es6语法，不会全部处理。
                                {
                                    useBuiltIns: 'usage'
                                }
                            ],
                             
                        ]
                    }
                },
                include: [path.resolve('src')],
                exclude: /node_modules/
            }
        ]
    }
}

4. css-loader启用css模块化

所有样式是局部作用域，解决了全局污染的问题

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                // postcss-loader放在css-loader后
                use: [
                    'style-loader', 
                    'css-loader',
                    {
                        loader: 'css-loader',
                        // 启用css模块化
                        options: {
                            modules: true
                        }
                    } ,
                    'postcss-loader',
                    'sass-loader']    
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

5. 使用file-loader打包字体图标

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入配置模块
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                // postcss-loader放在css-loader后
                use: [
                    'style-loader', 
                    'css-loader',
                    {
                        loader: 'css-loader',
                        // 启用css模块化
                        options: {
                            modules: true
                        }
                    } ,
                    'postcss-loader',
                    'sass-loader']    
            },
            {
                test: /\.(eot|svg|ttf|woff)/,
                use: 'file-loader',
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        // 使用
        new CleanWebpackPlugin()
    ]
}

6. 什么是SourceMap

包含了源代码和打包代码的映射关系，方便在开发模式下观察错误信息的位置。默认是开启的状态，可设置devtool属性关闭。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    devtool: false, // source-map, inline-source-map eval-sour      ce-map......
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
}

7. 什么是WebpackDevServer

开发服务器的配置。具体配置请查看webpack中文文档。

安装

npm install webpack-dev-server -D

package.json文件配置
可以使用npm run start启动webpack服务

"scripts": {
    "start": "webpack server"
}

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    devtool: false,
    devServer: {
        // contentBase: './dist', 版本三种配置
        static: './dist',
        // 端口号
        port: 3000,
        // 实现请求转发配置
        proxy: {
            // 如果接口以/api开头，则代理到以下地址发送请求
            "/api": {
                target: "http://localhost",
                changeOrigin: true,
                // 实际接口请求地址中去掉了/api
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
        // 热更新
        hot: true,
        // 启动服务器后自动打开浏览器
        open: true,
        // 压缩
        compress: true,
        // 惰性
        lazy: true,
    },
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            cache: false,
        }),
        new CleanWebpackPlugin()
    ]
}