Webpack

已于 2023-12-04 17:57:06 修改
阅读量169 收藏 1
点赞数
文章标签： webpack 前端 node.js
于 2023-11-18 17:47:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50829019/article/details/134480640
版权

目录

一、webpack 的基本配置

1、 webpack 的默认配置

2、在命令行中修改打包的默认入口文件名、默认出口文件名和默认出口文件

3、在webpack.config.js 配置文件中修改webpack 的配置

4、修改了webpack.config.js 的文件名称后，如何运行配置文件？

二、loader

1、对于css 文件的处理

2、对于less 文件的处理

3、PostCSS 中的插件

1、autoprefixer 自动为有兼容性问题的css 样式添加前缀

 2、postcss-preset-env 为开发时的主要功能预设配置(功能更强大，包括css 的浏览器兼容性问题)

4、webpack 处理图片

1、asset module type 资源模块类型

2、对打包的图片重命名、根据图片大小区分打包方式

5、webpack 对vue 文件的处理

 6、webpack 解析文件或文件夹

三、babel

四、plugin

1、loader 和plugin 的区别：

2、CleanWebpackPlugin

3、HtmlWebpackPlugin

4、DefinePlugin (注入变量)

五、Mode 模式

六、webpack 搭建本地服务器（自动打包，自动刷新浏览器）

 1、webpack-dev-server

2、devServer 配置

3、认识模块热替换（HMR）

七、proxy

1、proxy 代理的配置

2、changeOrigin 的解析

3、historyApiFallback

八、webpack 区分环境

一、webpack 的基本配置

1、 webpack 的默认配置

  • 默认入口文件  src/index.js
  • 默认出口文件 dist/main.js
  • 默认出口文件夹 dist
  • 可以在命令行中通过 npx webpack 进行打包

2、在命令行中修改打包的默认入口文件名、默认出口文件名和默认出口文件

  • --entry 修改文件的默认入口文件名
  • --output-filename 修改文件的默认出口文件名
  • --output-path 修改文件的默认出口文件夹
npx webpack --entry ./src/main.js --output-filename bundle.js --output-path ./build

3、在webpack.config.js 配置文件中修改webpack 的配置

const path = require("path")

// 因为webpack 是运行在node中，所以要使用node 的commonJS 模块化语法
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        // __dirname 获取当前文件所在路径
        // path 的值需要使用绝对路径
        path: path.resolve(__dirname, "./build")
    }
}

4、修改了webpack.config.js 的文件名称后，如何运行配置文件？

  • 如果将webpack.config.js 修改为wp.config.js 后在命令行中输入npx webpack 是找不到默认的配置文件的
  • 可以再命令行中输入npx webpack --config wp.config.js 运行改名后的webpack配置文件 或者在package.json 文件中写脚本
// 默认的打包方式 webpack.config.js
"scripts": {
    "build": "webpack"
}
// 然后在命令行中运行脚本
npm run build
// 修改配置文件名后的打包方式 
"scripts": {
    "build": "webpack --config wb.config.js"
}

// 然后在命令行中运行脚本
npm run build

二、loader

1、对于css 文件的处理

npm install css-loader -D
// css-loader 只负责解析css 文件，不会将文件插入到页面中
// 所以这时需要用到style-loader
npm install style-loader -D

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                // 告诉webpack 匹配什么类型的文件, 通常会设置成正则表达式
                test: /\.css$/,
                // 告诉webpack 使用什么样的loader 来处理匹配到的文件
                // use 中多个loader 的使用顺序是从后往前的 
                use: [
                    { loader: "style-loader", "css-loader" }
                    // { loader: "style-loader" },
                    // { loader: "css-loader" }
                ]
            }
        ]    
    }
}

2、对于less 文件的处理

npm install less-loader -D

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader", "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader", "less-loader", "less-loader"}
                ]
            }
        ]    
    }
}

3、PostCSS 中的插件

1、autoprefixer 自动为有兼容性问题的css 样式添加前缀

当使用user-selece: none; (用户是否能选中)这样的具有兼容性问题的css 样式时，需要在该样式前加浏览器前缀，PostCSS 可以自动检测该css 样式是否具有兼容性问题，并自动添加浏览器前缀

npm install postcss-loader -D
// 自动添加浏览器前缀的插件
npm install autoprefixer -D

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [ "autoprefixer" ]
                            }
                        }    
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader",
                    "postcss-loader"
                ]
            }
        ]    
    }
}

或通过postcss.config.js 文件来配置postcss-loader

npm install postcss-loader -D
// 自动添加浏览器前缀的插件
npm install autoprefixer -D

// webpack.config.js
const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader",
                    "postcss-loader"
                ]
            }
        ]    
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        "autoprefixer"
    ]
}

 2、postcss-preset-env 为开发时的主要功能预设配置(功能更强大，包括css 的浏览器兼容性问题)

npm install postcss-loader -D
npm install postcss-preset-env -D

// webpack.config.js
const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader",
                    "postcss-loader"
                ]
            }
        ]    
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        "postcss-preset-env"
    ]
}

4、webpack 处理图片

1、asset module type 资源模块类型

  • 在webpack5 之前加载资源需要用到一些loader，比如：raw-loader、url-loader、file-loader
  • 在webpack5 开始，可以直接通过资源模块类型，来替代上面的loader

资源模块类型，通过添加4种新的模块类型，来替换loader

  • asset/resource 发送一个单独的文件并导出URL，之前通过file-loader 实现(打包图片并且该图片有自己的地址，将地址设置到img/bgi 中的url 中。缺点：多了对图片加载的网络请求，几张图片就请求几次)
  • asset/inline 导出一个资源的data URI，之前通过url-loader 实现(将图片进行base64 的编码，并且直接将编码后的源码放到对应打包的js 文件中。缺点：造成打包后的js 文件比较大，造成对js 文件的下载和解析时间比较长)  （合理的图片加载规范：对于小图片可以进行base64 编码，对于大图片，可以进行单独的图片打包，形成url 地址，单独的请求这个url 的图片。）
  • asset/source 导出资源的源代码，之前通过使用raw-loader 实现（不常用）
  • asset 在导出一个data URI 和发送一个单独的文件之间自动选择，之前通过url-loader，并且配置资源体积限制实现；
const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader", "postcss-loader" ]
            },
            {
                test: /\.less$/,
                use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                // 资源模块类型
                type: "asset"
            }
        ]    
    }
}

2、对打包的图片重命名、根据图片大小区分打包方式

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                // 资源模块类型
                type: "asset",
                // 为不用大小的图片区分打包的方式
                parser: {
                    dataUrlCondition: {
                        // 小于60kb 就使用base64, 大于64kb 就单独进行打包
                        maxSize: 60 * 1024 
                    }
                }
                // 对打包后的图片重新命名
                generator: {
                    // img/: 表示将图片资源单独放到img 文件夹
                    // name: 用于指向原来的图片名称
                    // hash: webpack 生成的唯一的hash 值(:8 截取前8位)
                    // ext: 用于指向原来的图片后缀名
                    filename: "img/[name]_[hash:8][ext]"
                }
            }
        ]    
    }
}

5、webpack 对vue 文件的处理

npm install vue-loader -D

const path = require("path")
const { VueLoaderPlugin } from = require('vue-loader/dist/index')

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader", "postcss-loader" ]
            },
            {
                test: /\.less$/,
                use: [ "style-loader", "css-loader", "less-loader", "postcss-loader"                                                                                                                     ]
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                // 资源模块类型
                type: "asset"
            },
            {
                test: /\.vue$/,
                use: [ "vue-loader" ]
            }
        ]    
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

 6、webpack 解析文件或文件夹

  • 如果是文件，当省略文件后缀名时，通过webpack 配置默认添加文件后缀名。当引用App.vue 文件时，省略.vue 文件后缀名，如：import App from '@/views/App'，可以通过webpack 的resolve.extensions 进行配置后默认添加文件后缀名
  • 如果是文件夹，webpack 会根据resolve.mainFiles 查找index 文件，再通过resolve.extensions 来解析扩展名
const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader", "postcss-loader" ]
            },
            {
                test: /\.less$/,
                use: [ "style-loader", "css-loader", "less-loader", "postcss-loader"                                                                                                                     ]
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                // 资源模块类型
                type: "asset"
            },
            {
                test: /\.vue$/,
                use: [ "vue-loader" ]
            }
        ]    
    },
    resolve: {
        extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
        // 为固定的目录配置重命名
        alias: {
            src: path.resolve(__dirname, "./src")    
        }
    }
    plugins: [
        new VueLoaderPlugin()
    ]
}

三、babel

当遇到ES6+ 、ts、jsx 的代码时通过babel 进行处理转成es5 的代码

babel 和postcss 一样可以单独拿出来配置，放到babel.config.js 配置文件中

babel 的预设：@babel/preset-env

npm install babel-loader -D
// babel 的预设
npm install @babel/preset-env -D

// webpack.config.js
const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    // options: {
                    //     presets: [
                    //         "@babel/preset-env"
                    //     ]
                    }
                }
            }
        ]    
    }
}

// babel.config.js
module.exports = {
    presets: [
        "@babel/preset-env"    
    ]
}

四、plugin

1、loader 和plugin 的区别：

  1. loader 是用于特定的模块类型进行转换;
  2. plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

2、CleanWebpackPlugin

当重新打包时，都需要手动删除dist 文件夹，可以通过clean-webpack-plugin 在打包时自动删除dist 文件夹

npm install clean-webpack-plugin -D

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack=plugin");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    plugins: [
        new CleanWebpackPlugin()
    ]
}

3、HtmlWebpackPlugin

当进行打包时，不会打包index.html 文件，可以通过html-webpack-plugin 在打包时自动生成index.html 文件，并进行打包

npm install clean-webpack-plugin -D
npm install html-webpack-plugin -D

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack=plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '网页标题',
            // 当不想使用默认生成的index.html 模板时，可以自己设置要使用的index.html 文件
            template: './index.html'
        })
    ]
}

4、DefinePlugin (注入变量)

npm install clean-webpack-plugin -D
npm install html-webpack-plugin -D

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack=plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");

module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '网页标题',
            // 当不想使用默认生成的index.html 模板时，可以自己设置要使用的index.html 文件
            template: './index.html'
        }),
        new DefinePlugin({
            BASE_URL: "'./'",
            coderwhy: "'why'",
            counter: "123"
        })
    ]
}

// 定义的是全局变量，可以在任何地方直接使用
// main.js
console.log(BASE_URL);
console.log(process.env.NODE_ENV);

五、Mode 模式

  • 默认值是production
  • 可选值有："none" | "development" | "production"
  • 当设置为"development"，是会在DefinePlugin 中的process.env.NODE_ENV 设置为"development"，并为模块和chunk 启用有效的名
  • 当设置为 "production" 时，是会在DefinePlugin 中的process.env.NODE_ENV 设置为"production"，并为模块和chunk 启用确定性的混淆名

六、webpack 搭建本地服务器（自动打包，自动刷新浏览器）

 1、webpack-dev-server

开启一个本地服务器，供开发时使用

npm install webpack-dev-server -D

// package.json
"scripts": {
    "serve": "webpack serve --config webpack.config.js"
}

npm run serve

2、devServer 配置

const path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build");
    }
    devServer: { 
        // 默认为true
        hot: true,
        // 默认为localhost(127.0.0.1)，也可以修改为0.0.0
        host: "0.0.0",
        // 默认是8080
        port: 8888,
        // 运行代码后自动打开浏览器 
        open: true 
        // 是否对文件进行压缩
        compress: true
    }
}

3、认识模块热替换（HMR）

  • HMR 的全程是Hot Module Replacement， 翻译为模块热替换;
  • 模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面;
  • 当某一个模块发生变化，只需要加载该模块的变化，不需要刷新整个浏览器
// main.js
if(module.hot) {
    module.hot.accept("./utils.js", () => {
        console.log("utils更新了")
    })
}

七、proxy

1、proxy 代理的配置

proxy 是用来设置代理来解决跨域访问的问题：

  • 比如我们的一个api 请求的是http://localhost:8888,但是本地启动服务器的域名是http://localhost"8000, 这个时候发送网络请求会出现跨域的问题
  • 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域问题，就可以解决跨域问题了

我们可以进行如下的设置：

  • target：表示的是代理到的目标地址，比如/api-hy/moment会被代理到http://localhost:8888/api-hy/moment;
  • pathRewrite：默认情况下，我们的/api-hy 也会被写入到URL 中，如果希望删除，可以使用pathRewrite
  • secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false;
  • changeOrigin：表示是否更新代理后请求的headers 中的host 地址

2、changeOrigin 的解析

changeOrigin 是要修改代理请求中的headers 中的host 属性

  • 因为我们真是的请求，其实是需要通过http://localhost:8888来请求的
  • 但是因为使用了代码，默认情况下它的值是http://localhost:8000
  • 如果我们需要修改，那么可以将changeOrigin 设置为true 即可

3、historyApiFallback

  • historyApiFallback 是开发中一个非常常见的属性，它主要的作用是解决SPA 页面在路由跳转之后，进行页面刷新时，返回404 的错误
  • boolean 值：默认是false，如果设置为true，那么在刷新时，返回404错误时，会自动返回index.html 的内容
  • object 类型的值，可以配置rewrites 属性：可以配置from 来匹配路径，决定要跳转到哪一个页面
  • 事实上devServer 中实现historyApiFallback 功能是通过connect-history-api-fallback 库的；

八、webpack 区分环境

npm install webpack-merge -D

"scripts": {
    "serve": "webpack serve --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js"
}

npm run serve
npm run build

// webpack.dev.config.js
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comn.config.js");
module.exports = merge(commonConfig, {
    mode: "development",
    entry: "",
    output: ""
})

// webpack.prod.config.js
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comn.config.js");
module.exports = merge(commonConfig, {
    mode: "production",
    entry: "",
    output: ""
})

// webpack.comn.config.js
// 用于书写公共配置

nknmn_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
webpack.config.js 中配置代理
百晓子木
06-30 6003
webpack-配置文件
weixin_45002586的博客
11-14 563
webpack-配置文件
webpack
iamzhiyudong
10-17 3724
webpack 文章目录webpack1. webpack1.1 静态资源多了带来的问题1.2 如何解决上述问题2. webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack配置
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack demo
07-13
webpack demo
webpack.md
02-27
自学webpack 笔记 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的...
webpackDemo
08-23
依据webpack官方文档，指南手册整合得demo，让你充分了解打包得全过程。
webpack文档
07-05
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack.zip
01-28
1.webpack 分享PPT 2.loader demo 3.plugin demo 4.webpack常用配置demo 5.bapable实现demo
webpack配置文件
09-28
webpack详细配置信息，命令行npm i 可安装运行项目，项目完成之后直接webpack即可将项目打包
webpack_react
09-18
webpack+react搭建项目
webpack学习资料
11-25
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。该资料为webpack学习课程的课件及代码资料
webpack的基本原理及手动配置webpack的详细步骤
07-03
以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...
Webpack全面实战企业级项目搭建视频.zip
07-06
02_2_1_webpack的安装 03_2_2_webpack_cli的使用 04_2_3_npx的原理介绍 05_2_4_webpack的应用场景 06_2_5_webpack的基础配置 07_2_6_将webpack命令配置到package_json 08_2_7_watch模式 09_2_8_webpack_dev_...
webpack config
最新发布
05-18
Webpack是一个现代化的JavaScript应用程序打包工具。Webpack 可以将多个 JavaScript 文件打包成一个文件，同时还可以将 CSS、图片等资源也打包到一起。Webpack 的配置文件是 webpack.config.js，它是一个 CommonJS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值