webpack的基本使用（详解）1-打包js、html、css

站长

2023年09月26日 19:36 · 阅读数 14

前言

前两天老大叫我去复习一下 webpack 的使用，想要实现 webpack 对js、css和文件的单独打包，类似 vue.config.js 打包出来的效果。自己去看了一些教程，能够实现想要的功能，本文对webpack的介绍就不做讲述了，主要实现打包功能。

本文会讲述如何去使用webpack打包，由于使用到的是 webpack5 ，使用不当的话会经常报错，看到一片报错是很烧脑的事情。对
于一些注意事项和作者踩到的坑也会提及。

初始化流程

1、安装

先新建一个文件夹 webpack_project ,在使用 npm init -y 可快速生成一个 package.json

{
  "name": "webpack_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接着就是安装webpack了，这里可以使用 npm install webpack webpack-cli -g 进行全局安装，也可以使用 npm isntall webpack webpack-cli --save-dev进行局部安装，这里作者使用的是 --save-dev，由于后续可能会使用 webpack-cli，这里先把它安装好了，后续如果使用会做讲解。安装好之后在package.json这个文件下会生成一个devDependencies依赖，里面就会出现刚刚下载好的依赖。

"devDependencies": {
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }

2、创建项目文件夹及配置

在根目录下新建一个 src 文件夹用来放自己的开发文件，在 src 文件夹下新建一个index.js，这个index.js就是打包的入口文件。接着在根目录下新建一个webpack.config.js文件，这个文件就是整个项目的打包配置，一些规则也是在这里面进行配置。

webpack的基本使用（详解）1-打包js、html、css

接下来我们就可以向webpack.config.js文件里添加配置代码了

const path = require('path')   //调用路径

module.exports = {
  mode: 'development',    //开发模式
  entry: './src/index.js',    //入口文件
  output: {
    filename: 'index.js',    //输出文件名
  }
}

上面就是一个最简单的配置了，配置 mode 为开发模式，这个模式下打包出来的 js 文件不会进行压缩， entry 打包的入口， output 是输出的配置。这里我们也可以去浏览 webpack 的官方文档

接下来我们在package.json的scripts下添加启动命令

"scripts": {
    "build": "webpack"
  },

执行 npm run build 命令，就可以对项目进行打包了

webpack的基本使用（详解）1-打包js、html、css

可以看到在根目录下生成了一个 dist 文件夹，里面的 index.js 就是 src 下的 index.js 打包出来后的文件。这里我们可以知道在配置输出文件时，只配置输出文件名的话，这里会默认打包成一个 dist 文件夹，在这里也可以指定文件的输出目录。

output: {
    filename: 'index.js',  //输出文件名
    path: path.resolve(__dirname,'./build') //指定生成的目录
  }

webpack的基本使用（详解）1-打包js、html、css

打包html文件

1、新建文件

接下来我们开始对 html 文件进行打包, 首先我们在 src 文件夹下面新建一个 pages 文件夹，再在其里面新增一个 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>
  <h1>Welcome to Webpack!!!</h1>
</body>
</html>

2、配置

在对 html 文件进行打包时，需要下载额外的插件

npm install html-webpack-plugin --save-dev

下载成功后我们再去配置 webpack.config.js，首先在前面引入刚刚下载的插件，然后在 module.export 下新增一个 plugins ，这个模块用来配置需要用到的插件。配置好后我们再执行打包命令，在生成的 dist 文件夹下就新增了打包后的 html 文件。

const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

module.exports = {
  mode: 'development',  //开发模式
  entry: './src/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './src/pages/index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
  ]
}

打包结果：

webpack的基本使用（详解）1-打包js、html、css 这里可以看到打包后的 index.html 中自动引入了 index.js 文件。

打包css文件

1、新建文件

我们开始对 css 文件进行打包，首先在 src 文件夹下面新建一个 css 文件夹，再在里面新建一个 index.css 文件，在里面写上一些样式，这里我们给 h1 标签加上一个颜色。

webpack的基本使用（详解）1-打包js、html、css

接着我们再去 index.js文件中引入 css 文件

webpack的基本使用（详解）1-打包js、html、css

2、下载插件并进行配置

打包 css 同样需要下载插件， npm install --save-dev style-loader css-loader，这里下载了 style-loader 和 css-loader，关于 loader 的一些介绍同样可以去看官方文档，插件下载好后我们就可以去继续配置 webpack.config.js 了。在上面我们打包 html 的时候是在 module.export 下新增一个 plugins ，这里打包 css 需要新增一个 modules 来配置规则。关于规则的配置网上有很多种，写法也不同。

const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

module.exports = {
  mode: 'development',  //开发模式
  entry: './src/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  module: {
    rules: [
      {
        test:/\.css$/,    //css配置
        use: [ 'style-loader', 'css-loader' ]  //注意
      }
    ]
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './src/pages/index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
  ]
}

注意这里有个坑，在配置 css 规则的时候，use 后面数组的内容顺序：一定是 style-loader 在 css-loader 前面，不然会报错。

配置完后执行打包命令，再打开 dist 文件夹下的 index.html ，可以看到页面中的文字变了颜色。

webpack的基本使用（详解）1-打包js、html、css

3、打包less文件

关于 less 的打包和 css 不同的是需要多下载一个 loader，用来解析 less。npm install less less-loader --save-dev。index.html 增加一个h2，在 css 文件夹下面新建一个 index.less ，里面写上一点样式，再在 index.js 下引入这个 index.less 。

<!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>
  <h1>Welcome to Webpack!!!</h1>
  <h2>Welcome to Webpack!!!</h2>
</body>
</html>

webpack的基本使用（详解）1-打包js、html、css

继续配置 config.js。和上面配置 css 一样， use 的顺序最好是固定的。

{
        test: /\.less$/,
        use: [{
            loader: "style-loader" 
        }, {
            loader: "css-loader" 
        }, {
            loader: "less-loader"
        }]
      }

执行打包命令，再打开 dist 文件夹下的 index.html ，可以发现页面内容的样式已经改变了。

webpack的基本使用（详解）1-打包js、html、css

完整配置文件

1、package.json

{
  "name": "webpack_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.2.1",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }
}

2、webpack.config.js

const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

module.exports = {
  mode: 'development',  //开发模式
  entry: './src/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: [ 'style-loader', 'css-loader' ]  //顺序一定是这样
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" 
        }, {
            loader: "css-loader" 
        }, {
            loader: "less-loader"
        }]
      }
    ]
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './src/pages/index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
  ]
}

总结

本节初步讲述了对js、html、css的一个简单的打包，后面还会详细讲解多个文件的单独打包，比如js、css的分包、如何清理缓存、文件迁移以及一些插件的使用。

这是作者第一次写技术文章，后续会一直慢慢更新，如果文章中有错误的地方希望大家指出，也希望大家多多支持！！！

三克油！！！