webpack工具包

最新推荐文章于 2024-07-23 16:39:39 发布

web老猴子

最新推荐文章于 2024-07-23 16:39:39 发布

阅读量322

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/web220507/article/details/125547747

版权

webpack的基本介绍

官方概念：是一个现代JavaScript应用程序的静态模块打包器
静态：文件资源
模块：node环境，引入文件，遵循模块化语法
除了合并代码，还能翻译和压缩代码
作用：

静态模块打包器
翻译和压缩代码
减小代码包体积，让浏览器更快速的打开网页

学习webpack的准备工作

安装一个node
npm init 初始化这个项目，生成package.json文件
安装并使用webpack

安装并使用webpack

注意：

webpack是一个工具，对于所有的项目都可以来使用
不同的项目使用了不同的webpack版本，所以不推荐全局安装，打开老项目的时候，一定要注意版本号
采用局部安装，只是开发依赖，并不是生产依赖，在命令行加上-D
命令如下

npm i webpack webpack-cli -D

检测是否安装成功

npx webpack -v

修改用模块化的方式来改写代码

在tool.js导出模块

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

在index.js中导入模块

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

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错

使用webpack来做打包

命令如下
npx webpack 文件名
如果没有错误，会生成一个dist的文件夹，里面有一个main.js的文件，说明打包已经操作成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3CSYhz2-1656592111914)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af9880ddacf04fba8ec3170e9c08a447~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

引入打包后的js

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

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <div id="app">

    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./dist/main.js"></script>

</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXqLnB4O-1656592111914)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8380029b1c6247d6855446a123bea1e0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

为什么要用webpack

有效的处理模块化
把多个相互引用的.js文件打包成一个文件，能够压缩和加密文件，使文件上线更安全
在这个过程中nodejs的作用，它是webpack运行的基础，最终生成的main.js文件还是在浏览器中运行的

webpack的配置文件

创建并使用默认配置文件

在项目的根目录下，创建一个webpack.config.js的文件

内容如下：

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

作用：导出一个配置项，用来对webpack的打包行为做设置

了解入口和出口

入口文件：指定了webpack从哪个文件开始工作，在它的内部会引入其他的模块
出口文件：指定了最后打包之后的文件
在webpack中的默认出口和入口是：

默认入口：./src/index.js
默认出口：./dist/main.js

如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下直接省略入口文件，直接打包npx webpack

设置入口文件

在src目录下，新建一个js文件夹，把index.js改成main.js，并把tool.js放在里面
修改配置项，添加entry项

entry: './src/js/main.js'

设置出口文件

修改配置项，添加output项
把出口文件设置为在build目录下的bundle.js

1、引入nodejs中的path模块
2、在output项中，设置出口文件的绝对路径和文件名称

 output: {
        //设置路径
        path: path.join(__dirname, '/build'),
        // 设置名称（默认情况下叫main.js）
        filename: 'bundle.js'
    }

修改打包的模式

mode项用来设置打包的方式，如果不设置默认为production
development:开发模式（代码不会混淆，压缩）
production：生产模式（压缩、混淆、加密不可读）

在打包的时候指定配置文件

自己创建一个webpack.dev.js的文件，用来做配置文件
内容如下：

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

我们希望使用我们配置的文件来设置打包
格式如下： npx webpack --config webpack的配置文件

简化打包命令

定制script
在package.json中添加script命令来快速启动webpack

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1wVcJWX-1656592111915)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3a4ff1bfb2047bb94138da36ea14a8c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 在script中不需要再添加npx,它会自动在node_modules/.bin中去找命令
这样我们就得到了两个命令，dev和build
可以在小黑窗中运行： npm run build,npm run dev来运行