Webpack的应用

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量406 收藏 1
点赞数 1
分类专栏： ES 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/128658166
版权

处理css文件

总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件

index.js

import './index.css';

index.css

body {
  background-color: red;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>处理 CSS 文件</title>
  </head>
  <body></body>
</html>

webpack.config.js

entry默认是main 

html-webpack-plugin插件是为了方便以什么为模板然后生成文件并且引入对应的js和css文件 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader'
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

在没有配置css-loader时，npm run webpack出现以下情况

配置好css-loader之后，npm run webpack就成功通过了

 

有css-loader还不够，还需要安装style-loader，最后网页才能呈现样式

注意：上面图webpack.config.js中use后面可以是对象也可以是数组执行顺序从右往左

但是呢，我们通常都是link导入样式表文件，而不是直接style，因此我们需要安装插件mini-css-extract-plugin,之后配置插件filename指定哪个目录下（在上面output属性目录前提下）

注意：安装开发依赖npm install --save-dev 插件名字@版本号

package.json 

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

npm run webpack后生成dist目录下有index.html、main.js和css目录下的main.css文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>处理 CSS 文件</title>
  <link href="css/main.css" rel="stylesheet"></head>
  <body><script src="main.js"></script></body>
</html>

 

使用file-loader处理CSS图片中的图片

 总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 file-loader 处理 CSS 文件中的图片</title>
  </head>
  <body>
    <script>
      // npm install

      // 如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理

      // file-loader
      // npm install --save-dev file-loader@6.0.0
    </script>
  </body>
</html>

index.css

body {
  /* background-image: url(https://www.imooc.com/static/img/index/logo.png); */
  background-image: url(img/logo.png);
  background-repeat: no-repeat;
}

index.js

import './index.css';

console.log('index');

package.json

{
  "name": "webpack-css-img",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js（注意比上次文件增加的内容）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

继npm install和npm run webpack之后生成以下这样目录

 

dist目录下的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 file-loader 处理 CSS 文件中的图片</title>
  <link href="css/main.css" rel="stylesheet"></head>
  <body>
    <script>
      // npm install

      // 如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理

      // file-loader
      // npm install --save-dev file-loader@6.0.0
    </script>
  <script src="main.js"></script></body>
</html>

main.css 

body {
  /* background-image: url(https://www.imooc.com/static/img/index/logo.png); */
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
}

 

使用html-withimg-loader处理HTML中的图片

总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 html-withimg-loader 处理 HTML 中的图片</title>
  </head>
  <body>
    <img src="./src/img/logo.png" alt="" />

    <script>
      // npm install --save-dev html-withimg-loader@0.1.16
    </script>
  </body>
</html>

index.css

body {
  background-color: yellow;
  /* background-image: url(); */
}

index.js

import './index.css';

console.log('index');

package.json

{
  "name": "webpack-html-img",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "html-withimg-loader": "^0.1.16",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js（注意比上次文件增加的内容）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]',
            esModule: false
          }
        }
      },
      {
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

继npm install和npm run webpack之后生成以下这样目录 

 

dist目录下的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>使用 html-withimg-loader 处理 HTML 中的图片</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body><img src="img/logo.png" alt=""/>
<script>      // npm install --save-dev html-withimg-loader@0.1.16    </script>
<script src="main.js"></script>
</body>
</html>

 

使用file-loader处理js中的图片

总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 file-loader 处理 JS 中的图片</title>
  </head>
  <body>
    <script>
      // file-loader css img
      // html-withimg-loader html img
      // file-loader js img
    </script>
  </body>
</html>

index.css

body {
  background-color: yellow;
}

index.js

import './index.css';

import img from './img/logo.png';

console.log(img);//打发dist目录下的路径dist 看起来跟原来路径一样，实际上过程不同

const imgEl = document.createElement('img');
imgEl.src = img;
document.body.appendChild(imgEl);

package.json

{
  "name": "webpack-js-img",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js（注意比上次文件增加的内容）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'imgsss/[name].[ext]',
            esModule: false
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

 继npm install和npm run webpack之后生成以下这样目录 

 

dist目录下的index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 file-loader 处理 JS 中的图片</title>
  <link href="css/main.css" rel="stylesheet"></head>
  <body>
    <script>
      // file-loader css img
      // html-withimg-loader html img
      // file-loader js img
    </script>
  <script src="main.js"></script></body>
</html>

 

使用url-loader处理图片 

 总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 url-loader 处理图片</title>
  </head>
  <body>
    <script>
      // file-loader css img
      // html-withimg-loader html img
      // file-loader js img

      // npm install --save-dev url-loader@4.1.0
    </script>
  </body>
</html>

index.css

body {
  background-color: yellow;
}

index.js

import './index.css';

import img from './img/logo.png';

console.log(img);

const imgEl = document.createElement('img');
imgEl.src = img;
// base64
document.body.appendChild(imgEl);

package.json

{
  "name": "webpack-url-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

webpack.config.js（注意比上次文件增加的内容）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'img/[name].[ext]',
            esModule: false,
            // 图片是4k多，如果限制在3000，会以路径形式显示 如果限制在10000，会以base64显示
            limit: 3000
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

 继npm install和npm run webpack之后生成以下这样目录 

  

dist目录下的index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用 url-loader 处理图片</title>
  <link href="css/main.css" rel="stylesheet"></head>
  <body>
    <script>
      // file-loader css img
      // html-withimg-loader html img
      // file-loader js img

      // npm install --save-dev url-loader@4.1.0
    </script>
  <script src="main.js"></script></body>
</html>

 限制3000情况下

限制10000情况下

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 

 
 

 
 

 

                

        

        

    

  


    

      

        

            

              
                
                  bubbleJessica
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
我的webpack应用

				
			

			

				

					03-04
				

			

		

		

			
				
在这个名为"我的webpack应用"的项目中，我们很显然是在构建一个基于JavaScript的应用。  在JavaScript开发中，Webpack 提供了强大的模块管理和打包能力。它的工作原理是通过分析项目中的依赖关系，将各个模块按照...

			
		

	



                

              
                



	

		

			

				
					
微前端qiankun子应用把webpack换成vite

				
			

			

				

					liuxin123666的博客
				

				

					11-17
					
					1185
					
				

			

		

		

			
				
微前端qiankun子应用把webpack换成vite

			
		

	



                


  
              

                


	

		

			

				
					
Webpack--入门只看这一篇就够了(图文＋代码）

					
最新发布

				
			

			

				

					weixin_46714216的博客
				

				

					07-28
					
					5160
					
				

			

		

		

			
				
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。

			
		

	





	

		

			

				
					
Webpack5 最佳实践

				
			

			

				

					Moonoly的博客
				

				

					05-03
					
					3268
					
				

			

		

		

			
				
Webpack可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。本文主要介绍 webpack5 的常用配置

			
		

	



		

			
		



	

		

			

				
					
webpack的基本使用

				
			

			

				

					sdgjah2的博客
				

				

					11-22
					
					328
					
				

			

		

		

			
				
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。2.默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

			
		

	





	

		

			

				
					
webpack的应用

				
			

			

				

					weixin_63493918的博客
				

				

					09-13
					
					308
					
				

			

		

		

			
				
webpack的应用

			
		

	





	

		

			

				
					
webpack-deploy：有用的实用程序集合，用于部署（不仅是）Webpack应用程序

				
			

			

				

					02-04
				

			

		

		

			
				
Webpack部署实用程序有用的实用程序集合，用于部署（不仅是）Webpack应用程序安装cd $YOUR_PROJECTnpm install --save-dev productboard/webpack-deploy组态将deploy-config-example.js和secrets-example.js复制到...

			
		

	





	

		

			

				
					
angular-webpack:Angular + Webpack 应用程序的样板设置

				
			

			

				

					06-17
				

			

		

		

			
				
**Angular + Webpack 应用程序的样板设置**  在现代前端开发中，Angular 和 Webpack 是两个非常重要的工具。Angular 是一个强大的 JavaScript 框架，用于构建动态、响应式的 Web 应用程序，而 Webpack 是一个模块...

			
		

	





	

		

			

				
					
webpack-starter:Webpack应用程序案例

				
			

			

				

					04-20
				

			

		

		

			
				
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在开发环境中将各种资源（如 JavaScript、CSS、图片等）转换和打包成浏览器可理解的格式。在本"webpack-starter"项目中，我们将深入探讨如何使用 ...

			
		

	





	

		

			

				
					
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server

				
			

			

				

					02-05
				

			

		

		

			
				
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：...

			
		

	





	

		

			

				
					
利用ASP建立动态网站与应用实例.pptx

				
			

			

				

					05-11
				

			

		

		

			
				
利用ASP建立动态网站与应用实例

			
		

	





	

		

			

				
					
详解vue-cli + webpack 多页面实例应用

				
			

			

				

					08-30
				

			

		

		

			
				
本篇文章主要介绍了详解vue-cli + webpack 多页面实例应用，具有一定的参考价值，有兴趣的可以了解一下

			
		

	





	

		

			

				
					
webpack4简单入门实例

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了webpack4简单入门实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
webpack基础应用

				
			

			

				

					weixin_46364184的博客
				

				

					12-30
					
					136
					
				

			

		

		

			
				
webpack基础应用

			
		

	





	

		

			

				
					
【webpack】webpack的基本使用

				
			

			

				

					weixin_43655896的博客
				

				

					02-13
					
					7639
					
				

			

		

		

			
				
整理了一些webpack4基本的使用

			
		

	





	

		

			

				
					
webpack实战（二）：真实项目中应用系统配置

				
			

			

				

					weixin_34301307的博客
				

				

					06-05
					
					191
					
				

			

		

		

			
				
前言
本文续接文章： webpack实战（一）：真实项目中一个完整的webpack配置
上篇文章讲的是框架的配置方案，本文讲的是应用系统的配置方案。
这里，我们先梳理一下框架和应用的关系。这里我在框架配置中自定义了一个webpack插件，其作用就是生成一个loader.js文件，应用系统直接在页面中加载该文件，就会自动加载框架相应的资源文件。即，我们这里...

			
		

	





	

		

			

				
					
小程序插件开发实践与Webpack应用

				
			

			

				

					
				

			

		

		

			
				
在小程序打包插件的开发过程中，开发者通常会参考类似于"Writing a Plugin"的文章，如在使用mini-program-webpack-loader时，配合webpack 4的更新进行学习。关键知识点包括：  1. **apply方法的必要性**：  每个插件...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值