webpack基础入门笔记

站长

2023年09月26日 18:54 · 阅读数 17

笔者不是多么厉害的大牛啥的，只是一篇对于webpack的学习笔记。

代码是一方面，以后都是要努力站在工程化，整体的角度去看问题，从整个工程的角度去考虑问题的吧。

之前的一段时间单位的996是在搞得难受，只是不想让自己的私人时间被没说法的占用。

感谢我家莎老板的一次次暖心投喂，从眼药水，到零食。再到一次次晚回家监督我吃晚饭，996虽然难受，可却又可以和莎宝儿一起，在晚间时间吃饭，早上一起上班，也很美好。

谢谢你呀,我最亲爱的莎老板，我是因为你，才走到这里的。爱你呦~！嘻嘻嘻😁

1.`webpack`打包`css`:

安装这里笔者就不过多阐述了的。

整个学习的文件目录如下：

src ├─ assets │ └─ images │ ├─ bob.jpg │ └─ hero.jpeg ├─ test │ └─ date │ └─ printDate.js ├─ utils │ └─ date.js ├─ data.js ├─ index.js └─ style.css

通过npx webpack来完成对webpack的打包调用

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/dist.js"></script>
</body>
</html>

这里的index.html引用的是打包后的js文件（正常应该是index.js文件,这里为了运行方便）

在index.js中代码如下

import { getBlogPosts } from './data';
import './style.css';
import HeroImg from './assets/images/hero.jpeg';
import './test/date/printDate.js';
console.log('你好啊，于莎莎~！你必须是我的老婆~！');
console.log('使用getPost函数调用函数',getBlogPosts());
const blogs = getBlogPosts();

const ul = document.createElement('ul');

blogs.forEach((blog)=>{
  const li = document.createElement('li');
  li.innerText = blog;
  ul.appendChild(li);
});

document.body.appendChild(ul);

const image = document.createElement('img');
 image.src = HeroImg;
 document.body.prepend(image);

import './style.css';这里引入的css文件,运行后npx webpack后打包会出现下面的报错

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。

想要加载css文件，需要使用2个loader

跟打包相关的依赖都安装在开发者依赖中，因为打包后就不需要他们了

yarn add --dev style-loader css-loader

webpack.config.js文件中进行如下配置：

// 这里面使用的是nodejs的模块化语法
const path = require("path");
module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
    filename:'dist.js',
    path:path.resolve(__dirname,"dist"),
  },
  module:{
    rules:[
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      }
    ]
  }
};

2.`webpack`打包图片资源：

如何加载图片等静态资源呢？

对于图片等静态的资源，webpack原生就支持，不需要安装额外的loader文件去处理了。

在src目录下设置新建一个文件夹，层级如下：

src ├─ assets │ └─ images │ └─ hero.jpeg ├─ index.js └─ style.css

然后在index.js文件中引入hero.jpeg文件

//index.js文件内容如下:

import { getBlogPosts } from './data';
import './style.css';
import HeroImg from './assets/images/hero.jpeg';

console.log('你好啊，于莎莎');
console.log('使用getPost函数调用函数',getBlogPosts());
const blogs = getBlogPosts();

const ul = document.createElement('ul');

blogs.forEach((blog)=>{
  const li = document.createElement('li');
  li.innerText = blog;
  ul.appendChild(li);
});

document.body.appendChild(ul);

// 将img插入到body头部中去：
const image = document.createElement('img');
 image.src = HeroImg;
 document.body.prepend(image);

接着来看下webpack.config.js中的配置

// 这里面使用的是nodejs的模块化语法
const path = require("path");
module.exports = {
	//同上略
  module:{
    rules:[
		//略
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      }
    ]
  }
};

3.`webpack`中使用插件：

那么如何在webpack中使用插件呢？

手动写修改html中的文件中引用webpack打包后的js非常容易出错，而webpack有一个插件，可以自动生成一个html文件，这样就不需要要手动编写html中的代码了。

3.1-html-webpack-plugin：

安装插件：

yarn add html-webpack-plugin --dev

webpack.config.js文件中

// 这里面使用的是nodejs的模块化语法
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode:'development',
  devtool:"inline-source-map", //方便查看打包后的源代码
  entry:'./src/index.js',
  output:{
    filename:'dist.js.js',
    path:path.resolve(__dirname,"dist"),
  },
  // devServer配置项
  devServer:{
    static:'./dist',//指定dist目录
  },
  resolve:{
    alias:{  //配置路径别名
      utils:path.resolve(__dirname,'src/utils'),
    }
  },
  module:{
    rules:[
      // css打包
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      },
      // 图片等静态资源打包
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'loveYss'
    }),
  ]
};

通过const HtmlWebpackPlugin = require('html-webpack-plugin');引入
在plugins实例化

3.2-对`es6`代码进行降级：

es6至es5降级，完成多浏览器兼容

安装：

yarn add --dev babel-loader @babel/core @babel/preset-env

webpack.config.js中的配置

// 这里面使用的是nodejs的模块化语法
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode:'development',
  devtool:"inline-source-map", //方便查看打包后的源代码
  entry:'./src/index.js',
  output:{
    filename:'dist.js.js',
    path:path.resolve(__dirname,"dist"),
  },
  module:{
    rules:[
      // css打包
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      },
      // 图片等静态资源打包
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      },
      // es6到es5降级
      {
        test:/\.js$/i,
        exclude:/node_modules/,
        use:{
          loader:"babel-loader",
          options:{
            presets:["@babel/preset-env"],
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'loveYss'
    }),
  ]
};

这里主要是在module中配置

exclude:/node_modules/：排除node_modules文件夹中的js文件

运行npx webpack打包后,在dist文件夹下的dist.js中，查找对应的代码结果如下：

3.3-压缩打包后代码体积

接下来一个常见的场景，就是压缩webpack打包后的js代码，可以减少打包后的文件体积。

安装：

yarn add --dev terser-webpack-plugin

webpack.config.js中对应的配置如下：

// 这里面使用的是nodejs的模块化语法
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode:'development',
  devtool:"inline-source-map", //方便查看打包后的源代码
  entry:'./src/index.js',
  output:{
    // filename:'[name].[contenthash].js',
    filename:'dist.js.js',
    path:path.resolve(__dirname,"dist"),
  },
  // 最优化配置项
  optimization:{
    minimize:true, //是否要压缩
    minimizer:[new TerserPlugin()],//使用的压缩工具
  },
  resolve:{
    alias:{  //配置路径别名
      utils:path.resolve(__dirname,'src/utils'),
    }
  },
  module:{
    rules:[
      // css打包
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      },
      // 图片等静态资源打包
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      },
      // es6到es5降级
      {
        test:/\.js$/i,
        exclude:/node_modules/,
        use:{
          loader:"babel-loader",
          options:{
            presets:["@babel/preset-env"],
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'loveYss'
    }),
  ]
};

运行后npx webpack后，结果如下，可以看到文件中代码如下：

3.4-webpack-dev-server：

开发过程中，通常会在改变代码之后，重新打包，webpack提供了一个webpack-dev-server的开发服务器，如果我们修改了代码，他就会重新打包，并刷新页面

安装：

yarn --dev add webpack-dev-server

webpack.config.js中的配置

// 这里面使用的是nodejs的模块化语法
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  mode:'development',
  devtool:"inline-source-map", //方便查看打包后的源代码
  entry:'./src/index.js',
  output:{
    // filename:'[name].[contenthash].js',
    filename:'dist.js.js',
    path:path.resolve(__dirname,"dist"),
  },
  // 最优化配置项
  optimization:{
    minimize:true, //是否要压缩
    minimizer:[new TerserPlugin()],//使用的压缩工具
  },
  // devServer配置项
  devServer:{
    static:'./dist',//指定dist目录
  },
  resolve:{
    alias:{  //配置路径别名
      utils:path.resolve(__dirname,'src/utils'),
    }
  },
  module:{
    rules:[
      // css打包
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      },
      // 图片等静态资源打包
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      },
      // es6到es5降级
      {
        test:/\.js$/i,
        exclude:/node_modules/,
        use:{
          loader:"babel-loader",
          options:{
            presets:["@babel/preset-env"],
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'loveYss'
    }),
  ]
};

这里主要看的是devServer配置项

接着需要在webpack.json中添加一个scripts中添加start命令为webpack serve --open

//webpack.json
{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve --open"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0"
  }
}

3.5-打包后文件同名缓存问题：

dist.js文件名，每次都是一样的，浏览器会根据文件名进行缓存，为了避免浏览器进行缓存，会给文件名加上一串随机的字符，这样每次代码更新后，打包的文件都是是新的字符，浏览器便不会进行缓存。

来到webpack.config.js文件中

  output:{
    filename:'dist.js',
    path:path.resolve(__dirname,"dist"),
  },

修改为

  output:{
    filename:'[name].[contenthash].js',
    path:path.resolve(__dirname,"dist"),
  },

name：可以写死的，如果写成[name],那么webpack打包后会自动替换成main
contenthash：contenthash会在每次打包后，根据文件的内容，进行hash计算,得出一串不重复的字符

Mac下按CTRL+C键位，停止webpack开发服务器；然后执行命令npx webpack对现有代码进行打包，会发现文件名字的变化如下:

3.6-webpack设置路径别名:

有的时候js所在的文件目录可能会嵌套的比较深，要引入其他目录的js文件，要使用很多../来找到，webpack可以让我们指定一个路径别名。

在src目录下，新建一个utils目录

utils       
└─ date.js  
// date.js文件
export function dateToStr(date){
  return `${date.getFullYear()}-${date.getMouth()}`
}

test                
└─ date             
   └─ printDate.js  
// printDate.js
import { dateToStr } from '../../utils/date';
console.log(dateToStr(new Date()));

然后通过在webpack-config.js中设置别名

//略
  resolve:{
    alias:{  //配置路径别名
      utils:path.resolve(__dirname,'src/utils'),
    }
  },
//略

然后在printDate.js中就有可以不用通过../../

// printDate.js
import { dateToStr } from 'utils/date';
console.log(dateToStr(new Date()));

运行npx webpack打包后无报错，别名使用成功！

3.7-`webpack`可视化打包分析工具

帮助分析打包后的文件体积等

安装：

yarn add --dev webpack-bundle-analyzer

webpack.config.js中的配置如下：

// 这里面使用的是nodejs的模块化语法
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer');

module.exports = {
  mode:'development',
  devtool:"inline-source-map", //方便查看打包后的源代码
  entry:'./src/index.js',
  output:{
    // filename:'[name].[contenthash].js',
    filename:'dist.js.js',
    path:path.resolve(__dirname,"dist"),
  },
  // 最优化配置项
  optimization:{
    minimize:true, //是否要压缩
    minimizer:[new TerserPlugin()],//使用的压缩工具
  },
  // devServer配置项
  devServer:{
    static:'./dist',//指定dist目录
  },
  resolve:{
    alias:{  //配置路径别名
      utils:path.resolve(__dirname,'src/utils'),
    }
  },
  module:{
    rules:[
      // css打包
      {
        test:/\.css$/i,
        use:['style-loader','css-loader'],
      },
      // 图片等静态资源打包
      {
        test:/\.(png|jpg|svg|jpeg|gif)$/i,
        type:"asset/resource",
      },
      // es6到es5降级
      {
        test:/\.js$/i,
        exclude:/node_modules/,
        use:{
          loader:"babel-loader",
          options:{
            presets:["@babel/preset-env"],
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'loveYss'
    }),
    new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
  ]
};

这个工具会在我们运行npx webpack时自动打开

运行结果如下：

最后的最后，祝大家周末愉快，也希望自己可以像莎宝儿说的那样，更上一层楼↑。

大家周末愉快~！希望明天不下雨。今天依然是爱你的一天，莎老板，mua~！💋。

webpack基础入门笔记

1.webpack打包css:

2.webpack打包图片资源：

3.webpack中使用插件：