webpack学习：介绍与安装，简单使用

最新推荐文章于 2024-08-10 16:33:43 发布

大神乔伊

最新推荐文章于 2024-08-10 16:33:43 发布

阅读量121

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_44828005/article/details/121046339

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文内容如下

webpack是什么？如何使用？

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

webpack是什么

why?

前端快速发展，es6等语法浏览器跟不上，需要webpack做中间转换处理
网站越大，静态资源越多，就要发起多次请求，需要webpack做性能优化
处理各种各样的文件依赖关系，requirejs和webpack都可解决文件依赖关系
解决图片问题：合并，压缩，精灵图，图片的base64编码

what?

一款编译打包的成熟工具，可以理解为"中间件"，重点在于配置和使用

你的代码 → webpack → 浏览器才能正常渲染

特点

模块(文件)打包工具，默认只支持编译js-es5代码
自带模块化（commonjs规范）
编译：ES6 → ES5，jsx → ES5，ts → js
自带服务器，服务器也是基于Node(webpack-dev-server)
使用环境：react/vue

安装及简单使用

第一步：初始化

新建项目文件夹，在项目文件夹中，使用npm 或 yarn 初始化package.json文件

yarn init -y

第二步：在项目中安装webpack

yarn add webpack webpack-cli

第三步：新建测试文件

在根目录，新建文件夹src，在src下新建index.js，utils.js

src → index.js

const utils = require('./utils')

function add(a, b) {
    return a + b
}

utils.info('hello webpack')
console.log(add(5, 4));

src → utils.js

exports.info = function (str) {
    document.body.innerHTML = str
}

第四步：新建webpack配置文件

在根目录，新建webpack.config.js，并编写以下代码

注意：先别想着理解这些是什么意思，先跑起来，再看下一篇

const { resolve } = require('path')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

第五步：在package.json添加scripts运行命令

{
  "name": "webpack-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {   新加scripts
    "start": "webpack"
  },
  "dependencies": {
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1"
  }
}

第六步：打包

webpack会根据webpack.config.json的配置进行编译打包，打包后会在根目录多出一个dist文件夹

yarn start

第七步：在html中使用编译后的文件

在根目录，新建index.html，并且引入文件dist文件夹中的bundle.js

<!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>
    <script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

第八步：测试

手动打开index.html文件，就可以在页面看到hello webpack，按F12，看到打印

总结：

以上就是webpack的简单编译流程，和配置复杂项目的区别就在于根据项目配置各种需求，如css，less，图片，react，typescript等，以及项目的性能优化，加载速度，构建速度等等。

一般的项目不需要webpack，使用脚手架即可，比如react项目使用create-react-app，它们的底层是使用webpack实现的，都已经帮我们配置好了。

如果你需要继续学习配置webpack，可点击下方 webpack学习导图 根据需要学习

学习更多

webpack学习导图

大神乔伊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习：介绍与安装，简单使用

本文内容如下webpack是什么？如何使用？如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案webpack是什么why?前端快速发展，es6等语法浏览器跟不上，需要webpack做中间转换处理网站越大，静态资源越多，就要发起多次请求，需要webpack做性能优化处理各种各样的文件依赖关系，requirejs和webpack都可解决文件依赖关系解决图片问题：合并，压缩，精灵图，图片的base64编码what?一款编译打包的成熟工具，可以理解为"中间件
复制链接

扫一扫

专栏目录