2022-webpack5实战教程

前言

手摸手教你如何打包，让你在动手的实践过程中感受webpack。
在动手之前，你可先简单了解一下webpack的概念
每一小结都有对应的分支，方便大家学习
webpack版本：5.58.1

入门

新建一个目录，初始化npm
npm init
接下来安装webpack和webpack-cli两个包
npm i -D webpack webpack-cli

默认配置

新建一个文件夹src ,里面新建一个main.js,写一点测试代码
console.log("webpack")
在package.json中scripts中添加新的命令

"scripts": {
  "build": "webpack ./src/main.js"
},

执行打包命令npm run build
此时如果生成了一个dist文件夹，并且内部含有main.js说明已经打包成功了
这个例子只是webpack自己默认的配置，下面我们要实现更加丰富的自定义配置

自定义配置

新建一个build文件夹,里面新建一个webpack.config.js

const path = require('path');

module.exports = {
   
  mode:'development', // 开发模式
  entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
  output: {
   
      filename: 'output.js', // 打包后的文件名称
      path: path.resolve(__dirname,'../dist') // 打包后的目录
  }
}

更改打包命令

{
  // ...
  "scripts": {
    "build": "webpack --config build/webpack.config.js"
  },
}

然后执行 npm run build，会得到如下结果

其中main.js是我们第一次打包遗留的。
js已经打包好了，接下来我们要做的就是将js引入到html文件中

添加js到html文件

我们需要html-webpack-plugin来帮我们完成这件事情
npm i -D html-webpack-plugin
新建一个与build同级的文件夹public,里面新建一个index.html
配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode:'development', // 开发模式
  entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
  output: {
      filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
      path: path.resolve(__dirname,'../dist') // 打包后的目录
  },
  plugins:[
    new HtmlWebpackPlugin({
      // 选取一个html作为模版，在dist目录下会生成一个相同的html，之后将打包好的js注入到该html文件
      template: path.resolve(__dirname,'../public/index.html') 
    })
  ]
}

打包成功之后，查看dist目录下的index.html文件是否引用了打包之后的js

多文件如何注入到html

1. 多个入口文件，注入到同一个html文件中

这种情形我们只需添加入口就OK了，html-webpack-plugin插件会自动把所有打包好的js注入到html里

module.exports = {
   
  // ...
  entry: {
   
    main: path.resolve(__dirname,'../src/main.js'),
    share: path.resolve(__dirname,'../src/share.js')
  }
}

2. 多个入口文件，根据不同需求注入到不同的html文件

我们可以通过生成多个html-webpack-plugin实例来解决这个问题

module.exports = {
   
 // ...
  plugins:[
    new HtmlWebpackPlugin({
   
      // 选取一个html作为模版，在dist目录下会生成一个相同的html，之后将打包好的js注入到该html文件
      template: path.resolve(__dirname,'../public/index.html'),
      filename: 'index.html',
      chunks: ['main'] // 配置将哪些文件注入到该html文件，为[]在代表不注入js，若无该属性，默认注入所有js
    }),
    new HtmlWebpackPlugin({
   
      template: path.resolve(__dirname,'../public/share.html'),
      filename: 'share.html',
      chunks: ['share']
    })
  ] 
}

打包前清空dist目录

相信大家也发现了，dist目录下的文件越来越多，下面我们就来解决这个问题
我们需要clean-webpack-plugin来帮我们完成这件事情
npm i -D clean-webpack-plugin

// 其余配置同上
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
   
   plugins:[
    // ...
    new CleanWebpackPlugin()
  ] 
}

经掘友提醒，webpack5有新增清空dist目录的方式，在output增加clean字段，现补充在下面

module.exports = {
   
  // ...
  output: {
   
      filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
      path: path.resolve(__dirname,'../dist'), // 打包后的目录
      clean: true
  },
}

将css以style标签的方式注入到html

我们的入口文件是js，所以我们在入口js中引入我们的css文件

// main.js
import "../static/css/base.css"
import "../static/css/color.scss"
import "../static/css/fontsize.less"

console.log("webpack"