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

DanCheOo
5,819 阅读5分钟

前言

前两天老大叫我去复习一下 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文件，这个文件就是整个项目的打包配置，一些规则也是在这里面进行配置。

image.png

接下来我们就可以向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 命令，就可以对项目进行打包了

image.png

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

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

image.png

打包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',  //输出文件名
    }),
  ]
}

打包结果：

image.png 这里可以看到打包后的 index.html 中自动引入了 index.js 文件。

打包css文件

1、新建文件

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

image.png

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

image.png

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 ，可以看到页面中的文字变了颜色。

image.png

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>

image.png

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

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

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

image.png

完整配置文件

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的分包、如何清理缓存、文件迁移以及一些插件的使用。

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

三克油！！！

avatar
文章
阅读
粉丝