入门webpack，推荐看这一篇

'青山'

已于 2023-04-27 15:40:09 修改

阅读量271

点赞数 1

文章标签： webpack javascript 前端

于 2023-04-26 16:12:08 首次发布

本文链接：https://blog.csdn.net/maoer66/article/details/130380977

版权

1、基本介绍

Webpack是一个非常流行的JavaScript模块打包工具，它可以将多个JavaScript文件打包成一个或多个文件，从而提高网站的性能和加载速度。Webpack不仅可以打包JavaScript文件，还可以处理CSS、图片等资源文件，并且可以通过插件和加载器扩展其功能。

2、概念

为了学习Webpack，我们需要了解以下几个概念：

入口文件（Entry）：Webpack打包的起点，可以是一个或多个JavaScript文件。
出口文件（Output）：Webpack打包后的文件存放位置。
加载器（Loader）：Webpack可以通过加载器来处理除JavaScript以外的文件，比如CSS、图片等。
插件（Plugin）：Webpack的功能可以通过插件来扩展，比如优化代码、压缩文件等。

接下来，我们来看一下如何使用Webpack。

3、准备工作

环境准备：它是基于nodejs，所以本机一定要先安装了node。
项目准备：webpack是用来对已有项目进行打包，所以所以需要准备一个空项目

4、搭建环境

1.安装node
如果你已经安装好了node跳过此步骤，

没有安装则在点击链接进行安装点击链接

5、初始化项目

任意新建一个空文件夹，取名为vue-webpack-demo，进入到文件夹内部，用 npm init 命令来生成一个package.json

 npm init

会看到如下所示：

PS E:\demo\webpack-demo> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack-demo) ##项目名称-默认文件名称直接按回车

  
version: (1.0.0) ##// 版本号
description: ##// 描述
entry point: (index.js) ##// 入口文件-默认index.js
test command: ##项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: ##你要将项目上传到git中的话，那么就需要填写git的仓库地址
keywords:##项目关键字（我也不知道有啥用，哈哈哈）
author: ##作者的名字（也就是你叫啥名字）
license: (ISC) ##发行项目需要的证书
About to write to E:\demo\webpack-demo\package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes) ## 这里就是生成的package.json文件当中的默认内容，是否ok（一般都是ok，需要修改就去文件当中更改）

6、创建项目文件

项目文件创建
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>index</title>
</head>
<body>
    <div id="app"></div>
     <!-- 引入两个js文件 -->
    <script src="./tool.js"></script>
    <script src="./index.js"></script>
</body>
</html>

tool.js

const updateDom = (id, content) => {
    window.document.getElementById(id).innerHTML = content
}

index.js

updateDom('app', 'index.html')

用此方法进行项目管理就会出现在一个html中引入多个文件，就会出现顺序关系问题
当前代码当中就需要注意index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。
js代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。
变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。随着.js文件个数增加，则项目会越来越不好管理。

解决思路：模块化 + webpack打包

7、安装webpack

可以使用npm安装，命令如下：

npm i webpack webpack-cli -D

注意点：
前端很多都是版本不一致导致的各种问题。所以采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。

这时候我们更改一下文件当中的代码：蒋tool.js当中的函数updateDom导出，在index当中使用require引入，完成之后打包

tool.js

const updateDom = (id, content) => {
    window.document.getElementById(id).innerHTML = content
}
module.exports = {
    updateDom
}

index.js

const { updateDom } = require('./tool')
updateDom('app', 'index.html')

完成之后执行webpack命令
命令格式是：webpack 文件名

webpack ./index.js

打包完成后可打开dist目录下的index文件查看，代码进行加密处理
引入打包后的js
把上面打包完成的index.js引入到index.html，如下代码完成后并运行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>index</title>
</head>
<body>
    <div id="app"></div>
     <!-- 引入打包后的js文件 -->
    <script src="./dist/index.js"></script>
</body>
</html>

1.为啥要用webpack?

模块化开发：有效处理模块化，可以将代码划分为多个模块，每个模块都有自己的作用域，避免了全局变量的污染，使代码更加清晰易懂。默认情况下，浏览器并不支持模块化，而我们的前端项目又使用了模块化，有了webpack之后，就可以突破这个限制了。
自动化构建：Webpack可以自动化完成代码的构建，包括压缩、合并、混淆等操作，减少了手动操作的时间和错误。
性能优化：Webpack可以通过代码分割、懒加载等方式优化网站的性能和加载速度，减少了页面的加载时间，提升了用户的体验。
插件和加载器：Webpack可以通过插件和加载器扩展其功能，比如优化代码、压缩文件等，可以满足各种不同的需求。

2.这个过程中nodejs起了什么作用？
它是webpack的运行基础，没有了nodejs环境，就无法做类似于文件读写的操作了。
最终生成的index.js并不是在nodejs环境中运行的，整个的项目效果还是在浏览器中运行的。

8、认识webpack的配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports={
  mode: 'development',//打包方式
}

再次运行打包命令，查看产生的index.js文件的内容，对比与之前的变化

9、设置入口和出口

文件结构
然后修改配置文件之后重新打包，测试。

module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js' //入口文件
}

10、指定出口文件

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dist'), // 决定出口文件在哪里，第一个参数后面有讲解，第二参数，则是用来指定打包后的文件夹的名字
    filename: 'index.js' // 设置出口文件的名字。默认情况下，它叫main.js，用来指定打包后的文件名字
  }
}

上述代码解析：

join()：函数并非数组函数，而是path封装的join，其作用是将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。
__dirname：他是node.js的一个全局变量，__dirname指的是当前文件所在文件夹的绝对路径，在当前项目中 __dirname 是 E:\demo\vue-webpack-demo
对应易混淆：
resolve([from...],to)：作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。在当前项目中使用resolve需要这样写
path.resolve(__dirname, 'dist')
__filename：用来动态获取当前文件的绝对路径，在当前项目中 __filename是E:\demo\vue-webpack-demo\webpack.config.js

注意：在拼接路径的过程中，为了避免手动拼接带来的一些低级错误，所以多推荐使用path.join（）

11、修改打包模式

webpack给mode 提供了两个模式:

如果不设置，会默认为production。

evelopment ：开发模式(代码不会压缩混淆)
production：生产模式（压缩，混淆，加密… 不可读）

module.exports = {
  mode:"development"
}

12、在打包时指定配置文件

在项目根目录下创建webpack.dev.js，内容如下：

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dev'), // 决定出口文件在哪里
    filename: 'dev.js' // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

在package.json中添加script命令来快速启动webpack,代码如下：

"scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.config",
    "test": "echo 'Error: no test specified ' && exit 1"
}

这样，我们就得到了两个可以执行的命令: dev, build 。

可以在根目录下的小黑窗中通过:

npm run build, npm run dev 来运行

13、loader处理css文件

传统开发中：css样式是通过在.html文件中通过link标签引入的。但是，现代开发中，我们会把css文件看做资源，直接在.js文件中导入。

下面，我们来具体讨论如何处理.css文件。

接下来，我们需要设置加载器和插件。例如，我们想要处理CSS文件，就需要使用css-loader和style-loader加载器。可以使用npm安装，命令如下：
loader处理css文件结构
public.css

body,html{
  padding:0;
  font-size:14px;
}

style.css

@import "public.css"; /*@import语句用来导入另一个css文件。*/
div {
  border:4px solid #ccc;
  width: 50%;
  height: 200px;
  margin:30px auto;
  box-shadow: 3px 3px 3px #ccc;
  background-color: #fff;
  text-align: center;
}

在index.js文件中引入style.css

const {updateDom}=require('./tool')
import "../css/style.css"
updateDom('app', 'index.html')

这时候运行npm run build打包代码，会报错，原因：webpack把.css文件内容当作了js代码来运行
首先：安装loader

npm install css-loader style-loader --save-dev

具体修改配置文件如下：

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
    filename: 'index.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
        {
          test: /\.css$/, // 正则测试
          use: ['style-loader', 'css-loader'] // loader注意这两个顺序不能写反了 'style-loader'应该在'css-loader'，原因下面解析
        } 
      ] 
  }
}

css-loader: 以字符串形式读取CSS文件。
style-loader：是将外部css文件注入html文件中，最后将html文件中

因为css是放在style标签里面的，那么我们肯定是先将css代码编译之后再重新放入style标签里面。loader加载的顺序是规定的，是从右往左，所以style-loader要放在css-loader之前

14、loader处理less文件

在处理less文件之前需要安装链两个包
安装包
npm i less less-loader -D
loader处理less文件结构
index.less

@import "../css/style.css";

body{
  div {
    color: red;
  }
}

在index.js文件应用index.less

const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')

在配置文件中添加配置

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
    filename: 'index.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      }
    ]
  }
}

注意：如上配置中，对于less文件的处理涉及三个loader，其处理顺序是less-loader --> css-loader–>style-loader。

less-loader：用来加载less文件，并处理成css
css-loader：用来加载css文件
style-loader：用来将css代码以style标签的格式插入到html文件中

15、loader处理图片

创建文件文件夹img，下面添加两张图片
在处理文件的时候需要安装url-loader

npm i url-loader -d

style.css

@import "public.css";

div {
  border: 4px solid #ccc;
  width: 50%;
  height: 200px;
  margin: 30px auto;
  box-shadow: 3px 3px 3px #ccc;
  background-color: #fff;
  text-align: center;
  background-image: url('../img/webpack.png') //图片路径
}

index.js

const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
// 引⼊图⽚-使⽤
import imgUrl from '../img/webpack.jpg'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

webpack.config.js中的内容如下:

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
    filename: 'index.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
        use: 'url-loader',
      }
    ]
  }
}

loader⼩结

1、⼀切皆模块，不同的模块有不同的loader
2、loader：

第⼀步：安装包；
第⼆步：配置rules

16、plugin插件

webpack中除了loader之外，还有⼀个核⼼概念：plugin，中⽂就是插件。

这里我们就只介绍html-webpack-plugin

功能
把我们⾃已写的.html⽂件复制到指定打包出⼝⽬录下，并引⼊相关的资源代码。为html⽂件中引⼊的外部资源如script、link动态添加每次compile后的hash，防⽌引⽤缓存的外部⽂件问题。可以⽣成创建html⼊⼝⽂件。

下载安装

npm i html-webpack-plugin -D

在webpack.config.js中，做两件事：
1、引⼊插件

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

2、添加⼀个plugins配置

//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/index.js', //入口文件
  output: {
    path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
    filename: 'index.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
        use: 'url-loader',
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
      minify: { // 压缩HTML⽂件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空⽩符与换⾏符
        minifyCSS: true // 压缩内联css
      },
      filename: 'index.html',
      template: path.resolve('./index.html') // 指定模块的位置
    })
  ]
}

打包测试

它会把template中指定的.html⽂件复制（压缩）到出⼝⽂件夹
还会⾃动附上打包之后.css和 .js代码

17、plugin⼩结

plugin⽤来增加webpack能⼒，其主要理解为插件。
步骤：

下载安装
配置webpack.config.js
–> a. 引⼊
–> b. 添加plugins的设置

18.webpack实时打包

作用就是实时打包预览效果。当我们修改了代码时，⽴即运⾏打包命令，并显示效果
使用的是webpack-dev-server

下载安装

npm i webpack-dev-server -D

webpack.config.js当中配置devServer

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',//打包方式,开发环境
    entry: './src/js/index.js', //入口文件
    output: {
        path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
        filename: 'index.js, // 设置出口文件的名字。默认情况下，它叫main.js
    },
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端⼝
        open: true  // 配置是否⾃动打开浏览器
    },
    module: { // 处理非js模块
        rules: [ // 规则
            {
                test: /\.css$/, // 正则测试
                use: ['style-loader', 'css-loader'] // loader
            },
            {
                test: /\.less$/, // 正则测试
                use: ['style-loader', 'css-loader', 'less-loader'] // loader
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: 'url-loader',
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML⽂件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空⽩符与换⾏符
                minifyCSS: true // 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./index.html') // 指定模块的位置
        })
    ]
}

package.json：

  "scripts": {
     "server": "webpack-dev-server",
     "dev": "webpack --config webpack.dev.js",
     "build": "webpack --config webpack.config",
     "test": "echo 'Error: no test specified ' && exit 1"
  },

启动命令

现在通过 npm run server就可以实现实时打包、实时编译、实时浏览器查看效果了。它会⾃动打开⼀个浏览器窗⼝。

总之，Webpack是一个非常强大的工具，可以帮助我们在前端开发中更高效地管理和打包代码。虽然它的学习曲线可能有些陡峭，但是一旦掌握了它的核心概念和使用方法，就可以大大提升我们的开发效率和代码质量。希望这篇文章能够帮助你更好地理解Webpack，并在实际项目中灵活应用。

'青山'

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
入门webpack，推荐看这一篇

Webpack是一个非常流行的JavaScript模块打包工具，它可以将多个JavaScript文件打包成一个或多个文件，从而提高网站的性能和加载速度。Webpack不仅可以打包JavaScript文件，还可以处理CSS、图片等资源文件，并且可以通过插件和加载器扩展其功能。
复制链接

扫一扫