【webpack】webpack

最新推荐文章于 2024-05-29 21:08:09 发布

逆风飞翔的代码单身狗

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量128

点赞数

分类专栏： webpack 文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_41530639/article/details/107634121

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack是一款基于配置的模块化打包工具，适用于前端自动化构建。它强调模块化，通过loader和plugins处理资源，打包成符合生产环境的前端资源。与gulp相比，webpack更侧重于模块打包，而gulp则注重工作流程。文章详细介绍了webpack的安装、优势、入口出口配置以及多入口多出口的处理方式。

摘要由CSDN通过智能技术生成

webpack

它是一款模块化打包工具，它是基于配置的，可以通过一些配置来进行打包任务，在打包的时候依赖关系图，需要告知入口和出口，在webpack.config.js里面进行配置。

gulp or webpack的理解？

**同：**都是前端自动化的构建工具
异：
gulp它是一个基于流的自动化构建工具，强调工作流程，通过task方法设置一个个的任务（文件压缩、合并、启动server，对于模块化并没有进行过多的强调），通过.pipe（）管道输送到下一个流程
浏览器对大多预编译语言都没有办法去解析，所以需要webpack进行解析。**webpack是一个前端模块化开发的解决方案，强调模块化、压缩合并、预处理都是它的附带功能，更侧重模块打包，**我们可以把开发中所有的资源（图片、js文件、css资源）通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源
开发依赖devDependencies和运行依赖dependencies
在这里插入图片描述
1.全局安装webpack & webpack-cli：
需要全局安装这两个工具

npm i webpack -g
npm i webpack-cli -g
npm i yarn -g

2.webpack的优势：
在这里插入图片描述
简化开发流程，将import， const{}-解构语句，把es6的高级语法->浏览器能识别的es5语法
3.入口、出口：

具体实践
在初始化项目（npm init -y），我们需要在项目运行依赖安装webpack、webpack-cli
package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}

此时没有指明入口和出口的话，会报错：
在这里插入图片描述

在主目录下新建./src/index.js，它会把文件打包进主目录下的./dist/main.js，我们可以新建一个html，并引进打包后的js文件，就可以看到效果：

./dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./main.js"></script>
</body>

</html>

在这里插入图片描述
到这里我们还是没有看到webpack.config.js有什么作用：

此时我们把./src下的index.js改为123.js，通过指明入出口文件，再通过webpack就可以指定
webpack.config.js:

const path = require('path')
// 导出配置
module.exports = {
  entry: "./src/123.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '456.js'
  }
}

这种方式称为单入口单出口，还会有多入口单出口，此时只需要把要打包的文件写成数组的形式就可以了：
webpack.config.js:
在这里插入图片描述
webpack.config.js:

const path = require('path')
// 导出配置
module.exports = {
  entry: ["./src/123.js", './src/789.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '456.js'
  }
}

多入口，多出口：
webpack.config.js:
在这里插入图片描述

const path = require('path')
// 导出配置
module.exports = {
  entry: { 123: "./src/123.js", 789: './src/789.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

在这里插入图片描述
Tips:只用到name.js的时候，hash默认生成的文件后缀名是一致的

当然为了控制文件名的长度，我们可以在后面加入：

const path = require('path')
// 导出配置
module.exports = {
  entry: { 123: "./src/123.js", 789: './src/789.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
//  filename: '[name][hash].js',
    filename: '[name][hash:8].js'// 8为指明的hash生成的文件名的长度
  }
}

一连串很长的自动生成的hash值，
tips：但是此时的性能很低，因为当我们修改了其中一个文件的时候，它会把所有的入口文件全部打包一遍，重新生成，
当我们修改一个文件，这个文件发生变化，只需要重新生成一遍这个文件就可以了，我们可以通过chunkhash来实现：
在这里插入图片描述
当123.js文件发生变化，它只会把修改后的123.js重新打包一遍就可以了，而789.js不会发生变化

const path = require('path')
// 导出配置
module.exports = {
  entry: { 123: "./src/123.js", 789: './src/789.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][chunkhash:8].js'
  }
}