webpack 最全的总结

最新推荐文章于 2023-10-17 15:29:52 发布

Mr._Dang

最新推荐文章于 2023-10-17 15:29:52 发布

阅读量861

点赞数 5

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/m0_55832273/article/details/121919245

版权

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, {...})