开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> webpack 最全的总结 -> 正文阅读

[JavaScript知识库]webpack 最全的总结

webpack

安装

安装之前进行项目初始化生成 package.json 文件

npm init -y 
npm init

接下来安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save

配置命令行

在package.json文件的scripts字段中配置启动命令

"scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
}

创建入口文件

webpack 默认的入口文件是 src 目录下的 index.js;
需要在项目的根目录下创建src文件夹，在里边创建 index.js 文件作为入口文件

执行命令

命令执行成功后。会自动在项目的根目录下生成一个dist 文件，该文件就是打包后的产物； dist 文件不是必须的，可以随时删除的

开发环境

	npm run dev

生产环境

	npm run build

webpack 支持的模块化

webpack 支持 CommonJs 模块化和 es6的模块化

CommonJs

		// 模块导出
		module.exports = {}
		//  模块导入
		const res = requrie('模块url')

		//  模块导出
		export default 模块名
		export 模块对象
		
		//  模块导入
		import  ... from '模块url'

webpack的配置文件

如果要对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js；该文件是一个模块

		module.exports = {
		    ...
		}

webpack的入口和出口

webpack的入口 entry 和出口 output ：

单一入口和出口

		//  单一入口和出口
		const path = require('path')
		module.exports = {
		    entry:'index.js',
		    output:{
		        //  设值出口文件存放的目录
		        path:path.resolve(__dirname, "dist"),
		        //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
		        filename:'[name].js'
		    }
		}

多入口文件和单一出口

		//  多入口文件和单一出口
		const path = require('path')
		module.exports = {
		    entry:['index.js', 'main.js',...],
		    output:{
		        //  设值出口文件存放的目录
		        path:path.resolve(__dirname, "dist"),
		        //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
		        filename:'[name].js'
		    }
		}

多入口配置

		const path = require('path')
		module.exports = {
		    entry:{
		        index:'index.js',
		        main:'main.js'
		    }
		    output:{
		        //  设值出口文件存放的目录
		        path:path.resolve(__dirname, "dist"),
		        //  配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
		        filename:'[name].js'
		    }
		}

webpack的loader 和 plugin

webpack 处理模板文件

webpack 处理html 文件：需要借助于 html-webpack-plugin 插件，该插件会自动帮我们管理引入js文件

安装插件

	npm i html-webpack-plugin --save

配置插件

		//  1 引入插件
		const HtmlWebpackPlugin = require('html-webpack-plugin')
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        })
		    ]
		}

管理输出文件夹dist

需要管理输出的文件dist，可以通过配置项或者是插件实现自动管理dist文件夹

配置项

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js',
		        //  管理dist文件夹
		        clean:true
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        })
		    ]
		}

通过插件
需要安装 clean-webpack-plugin 插件

	npm i clean-webpack-plugin --save

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		const  { CleabWebpackPlugin } = require('clean-webpack-plugin')
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js',
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        }),
		        new CleabWebpackPlugin()
		    ]
		}

webpack 处理 css 文件

webpack 处理css / sass 文件，需要依赖loader；需要安装 css-loader 和 style-loader , sass-loader 和 sass

loader 的作用：

css-loader : 处理解析css文件
style-loader ：把处理解析后的css文件从js文件中提取出来，以内部样式的方式（style标签）插入到html页面中，
sass ：解析处理 sass文件
sass-loader : 编译转码为css文件

生成内部的css样式

安装loader

	npm i css-loader style-loader sass-loader sass --save

配置loader

		//  1 引入插件
		const HtmlWebpackPlugin = require('html-webpack-plugin')
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    module:{
		        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
		        rules:[
		            // 每个对象都是一个loader的配置项
		            {
		                test:/\.css$/i,
		                use:['style-loader', 'css-loader']
		            },
		            {
		                test:/\.(scss|sass)$/i,
		                use:['style-loader', 'css-loader', 'sass-loader']
		            }
		        ]
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        })
		    ]
		}

打包生成独立的css文件

打包生成独立的css文件，需要借助于 mini-css-extract-plugin 插件，

安装

	npm install --save-dev mini-css-extract-plugin

配置插件

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		const MiniCssExtractPlugin = require("mini-css-extract-plugin");
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    module:{
		        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
		        rules:[
		            // 每个对象都是一个loader的配置项
		            {
		                test:/\.css$/i,
		                // 使用插件内部的loader 生成单独的css文件
		                use:[MiniCssExtractPlugin.loader 'css-loader']
		            },
		            {
		                test:/\.(scss|sass)$/i,
		                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
		            }
		        ]
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        }),
		        new MiniCssExtractPlugin()
		    ]
		}

webpack处理图片资源

webpack 处理图片资源，需要使用 file-loader 和 url-loader

安装

	npm i file-loader url-loader --save

配置loader

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		const MiniCssExtractPlugin = require("mini-css-extract-plugin");
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    module:{
		        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
		        rules:[
		            // 每个对象都是一个loader的配置项
		            {
		                test:/\.css$/i,
		                // 使用插件内部的loader 生成单独的css文件
		                use:[MiniCssExtractPlugin.loader 'css-loader']
		            },
		            {
		                test:/\.(scss|sass)/i,
		                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
		            },
		            //  配置处理图片的loader
		            {
		                test:/\.(jpg|jpeg|png|gif|webp)$/i,
		                use:[
		                    {
		                        loader:'url-loader',
		                        options:{
		                            //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
		                            limit:8192,
		                            // name 属性配置输入的图片名和路径
		                            name:'image/[name].[ext]'
		                        }
		                    }
		                ]
		            }
		        ]
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        }),
		        new MiniCssExtractPlugin()
		    ]
		}

webpack的热更新

webpack的 webpack-dev-server 插件可以实现热更新并开启服务

安装

	npm i webpack-dev-server --save

配置 devServer

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		const MiniCssExtractPlugin = require("mini-css-extract-plugin");
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    devServer:{
		        // 开启服务的端口号
		        port:9001
		    },
		    module:{
		        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
		        rules:[
		            // 每个对象都是一个loader的配置项
		            {
		                test:/\.css$/i,
		                // 使用插件内部的loader 生成单独的css文件
		                use:[MiniCssExtractPlugin.loader 'css-loader']
		            },
		            {
		                test:/\.(scss|sass)/i,
		                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
		            },
		            //  配置处理图片的loader
		            {
		                test:/\.(jpg|jpeg|png|gif|webp)$/i,
		                use:[
		                    {
		                        loader:'url-loader',
		                        options:{
		                            //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
		                            limit:8192,
		                            // name 属性配置输入的图片名和路径
		                            name:'image/[name].[ext]'
		                        }
		                    }
		                ]
		            }
		        ]
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        }),
		        new MiniCssExtractPlugin()
		    ]
		}

配置启动命令
在 package.json 文件中配置启动命令 , 执行命令 npm run server

	"scripts":{
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "dev":"webpack --mode development",
	    "build":"webpack --mode production",
	    "server":"webpack serve --open"
	}

webpack的环境配置

环境分为开发环境，生产环境，测试环境等，因此需要配置环境

需要借助于插件 webpack-merge 帮我们合并处理配置文件：

	npm i webpack-merge --save

创建三个webpack的配置文件： webpack.basic.js webpack.dev.js webpack.pro.js

webpack.basic.js
webpack.dev.js

		const { merge } = require('webpack-merge');
		const basic = require('webpack.basic.js');
		module.exports = merge(basic, {...})

webpack.pro.js

		const { merge } = require('webpack-merge');
		const basic = require('webpack.basic.js');
		module.exports = merge(basic, {...})

webpack

安装

安装之前进行项目初始化生成 package.json 文件

npm init -y 
npm init

接下来安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save

配置命令行

在package.json文件的scripts字段中配置启动命令

"scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
}

创建入口文件

webpack 默认的入口文件是 src 目录下的 index.js;
需要在项目的根目录下创建src文件夹，在里边创建 index.js 文件作为入口文件

执行命令

命令执行成功后。会自动在项目的根目录下生成一个dist 文件，该文件就是打包后的产物； dist 文件不是必须的，可以随时删除的

开发环境

npm run dev

生产环境

npm run build

webpack 支持的模块化

webpack 支持 CommonJs 模块化和 es6的模块化

CommonJs

// 模块导出
module.exports = {}
//  模块导入
const res = requrie('模块url')

//  模块导出
export default 模块名
export 模块对象

//  模块导入
import  ... from '模块url'

webpack的配置文件

如果要对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js；该文件是一个模块

module.exports = {
    ...
}

webpack的入口和出口

webpack的入口 entry 和出口 output ：

单一入口和出口

//  单一入口和出口
const path = require('path')
module.exports = {
    entry:'index.js',
    output:{
        //  设值出口文件存放的目录
        path:path.resolve(__dirname, "dist"),
        //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
        filename:'[name].js'
    }
}

多入口文件和单一出口

//  多入口文件和单一出口
const path = require('path')
module.exports = {
    entry:['index.js', 'main.js',...],
    output:{
        //  设值出口文件存放的目录
        path:path.resolve(__dirname, "dist"),
        //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
        filename:'[name].js'
    }
}

多入口配置

const path = require('path')
module.exports = {
    entry:{
        index:'index.js',
        main:'main.js'
    }
    output:{
        //  设值出口文件存放的目录
        path:path.resolve(__dirname, "dist"),
        //  配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
        filename:'[name].js'
    }
}

webpack的loader 和 plugin

webpack 处理模板文件

webpack 处理html 文件：需要借助于 html-webpack-plugin 插件，该插件会自动帮我们管理引入js文件

安装插件

npm i html-webpack-plugin --save

配置插件

//  1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        })
    ]
}

管理输出文件夹dist

需要管理输出的文件dist，可以通过配置项或者是插件实现自动管理dist文件夹

配置项

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js',
        //  管理dist文件夹
        clean:true
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        })
    ]
}

通过插件
需要安装 clean-webpack-plugin 插件

npm i clean-webpack-plugin --save

const HtmlWebpackPlugin = require('html-webpack-plugin')
const  { CleabWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js',
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        }),
        new CleabWebpackPlugin()
    ]
}

webpack 处理 css 文件

webpack 处理css / sass 文件，需要依赖loader；需要安装 css-loader 和 style-loader , sass-loader 和 sass

loader 的作用：

css-loader : 处理解析css文件
style-loader ：把处理解析后的css文件从js文件中提取出来，以内部样式的方式（style标签）插入到html页面中，
sass ：解析处理 sass文件
sass-loader : 编译转码为css文件

———————————————————————————————————————————————————————————————————

生成内部的css样式

安装loader

npm i css-loader style-loader sass-loader sass --save

配置loader

//  1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js'
    },
    module:{
        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
        rules:[
            // 每个对象都是一个loader的配置项
            {
                test:/\.css$/i,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.(scss|sass)$/i,
                use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        })
    ]
}

打包生成独立的css文件

打包生成独立的css文件，需要借助于 mini-css-extract-plugin 插件，

安装

npm install --save-dev mini-css-extract-plugin

配置插件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js'
    },
    module:{
        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
        rules:[
            // 每个对象都是一个loader的配置项
            {
                test:/\.css$/i,
                // 使用插件内部的loader 生成单独的css文件
                use:[MiniCssExtractPlugin.loader 'css-loader']
            },
            {
                test:/\.(scss|sass)$/i,
                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        }),
        new MiniCssExtractPlugin()
    ]
}

webpack处理图片资源

webpack 处理图片资源，需要使用 file-loader 和 url-loader

安装

npm i file-loader url-loader --save

配置loader

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry:'index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'index.js'
    },
    module:{
        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
        rules:[
            // 每个对象都是一个loader的配置项
            {
                test:/\.css$/i,
                // 使用插件内部的loader 生成单独的css文件
                use:[MiniCssExtractPlugin.loader 'css-loader']
            },
            {
                test:/\.(scss|sass)/i,
                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            //  配置处理图片的loader
            {
                test:/\.(jpg|jpeg|png|gif|webp)$/i,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
                            limit:8192,
                            // name 属性配置输入的图片名和路径
                            name:'image/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            //  定义模板
            template:'index.html',
            //  输入文件名
            filename:'index.html'    
        }),
        new MiniCssExtractPlugin()
    ]
}

webpack的热更新

webpack的 webpack-dev-server 插件可以实现热更新并开启服务

安装

	npm i webpack-dev-server --save

配置 devServer

		const HtmlWebpackPlugin = require('html-webpack-plugin')
		const MiniCssExtractPlugin = require("mini-css-extract-plugin");
		module.exports = {
		    entry:'index.js',
		    output:{
		        path:path.resolve(__dirname, 'dist'),
		        filename:'index.js'
		    },
		    devServer:{
		        // 开启服务的端口号
		        port:9001
		    },
		    module:{
		        //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
		        rules:[
		            // 每个对象都是一个loader的配置项
		            {
		                test:/\.css$/i,
		                // 使用插件内部的loader 生成单独的css文件
		                use:[MiniCssExtractPlugin.loader 'css-loader']
		            },
		            {
		                test:/\.(scss|sass)/i,
		                use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
		            },
		            //  配置处理图片的loader
		            {
		                test:/\.(jpg|jpeg|png|gif|webp)$/i,
		                use:[
		                    {
		                        loader:'url-loader',
		                        options:{
		                            //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
		                            limit:8192,
		                            // name 属性配置输入的图片名和路径
		                            name:'image/[name].[ext]'
		                        }
		                    }
		                ]
		            }
		        ]
		    },
		    plugins:[
		        new HtmlWebpackPlugin({
		            //  定义模板
		            template:'index.html',
		            //  输入文件名
		            filename:'index.html'    
		        }),
		        new MiniCssExtractPlugin()
		    ]
		}

配置启动命令
在 package.json 文件中配置启动命令 , 执行命令 npm run server

	"scripts":{
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "dev":"webpack --mode development",
	    "build":"webpack --mode production",
	    "server":"webpack serve --open"
	}

webpack的环境配置

环境分为开发环境，生产环境，测试环境等，因此需要配置环境

需要借助于插件 webpack-merge 帮我们合并处理配置文件：

	npm i webpack-merge --save

创建三个webpack的配置文件： webpack.basic.js webpack.dev.js webpack.pro.js

webpack.basic.js
webpack.dev.js

		const { merge } = require('webpack-merge');
		const basic = require('webpack.basic.js');
		module.exports = merge(basic, {...})

webpack.pro.js

		const { merge } = require('webpack-merge');
		const basic = require('webpack.basic.js');
		module.exports = merge(basic, {...})

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-15 18:10:55 更:2021-12-15 18:11:00

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 9:53:02-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码

[JavaScript知识库]webpack 最全的总结

webpack

安装

配置命令行

创建入口文件

执行命令

webpack 支持的模块化

webpack的配置文件

webpack的入口和出口

webpack的loader 和 plugin

webpack 处理 模板文件

管理输出文件夹dist

webpack 处理 css 文件

生成内部的css样式

打包生成独立的css文件

webpack处理图片资源

webpack的热更新

webpack的环境配置

webpack

安装

配置命令行

创建入口文件

执行命令

webpack 支持的模块化

webpack的配置文件

webpack的入口和出口

webpack的loader 和 plugin

webpack 处理 模板文件

管理输出文件夹dist

webpack 处理 css 文件

生成内部的css样式

打包生成独立的css文件

webpack处理图片资源

webpack的热更新

webpack的环境配置

webpack 处理模板文件

webpack 处理模板文件