Webpack的应用

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

处理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情况下

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 

 
 

 
 

 

                

        
阿里云国内75折 回扣 微信号：monov8   


阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8  飞机：@monov6 



                                            

        

        

            返回列表
            
上一篇：开发实践：一份复杂业务系统的 RESTFul 接口规范

            
下一篇：从0到1完成一个Vue后台管理项目（十六、后端分页方法以及分页组件的封装以及复用）

        

    



	
“Webpack的应用” 的相关文章

	


【NKOJ-昨天今天和明天】考试游记1年前 (2023-02-02)
实景三维模型道路中有很多破损车辆，有没有可以一键修除或去掉的办法？1年前 (2023-02-02)
【年终总结】求职面试一定要扬长避短1年前 (2023-02-02)
C++ TinyWebserver 部署到Linux下，并运行（使用的是Vmware的虚拟机运行Ubuntu20.04）1年前 (2023-02-02)
区间dp学习笔记1年前 (2023-02-02)
【Redis实战专题】「性能监控系列」全方位探索Redis的性能监控以及优化指南1年前 (2023-02-02)
python批量发邮箱1年前 (2023-02-02)
Redis实现朋友圈，微博等Feed流功能,实现Feed流微服务(业务场景、实现思路和环境搭建)_微博feed流设计1年前 (2023-02-02)
[Linux打怪升级之路]-重定向1年前 (2023-02-02)
Laravel + Vue 3（Vite、TypeScript）SPA 设置1年前 (2023-02-02)
	




                            

        

    



	

    

        

        
阿里云国际版