浅谈：webpack之简介

最新推荐文章于 2024-10-05 16:10:44 发布

左手画圆，右手画方183

最新推荐文章于 2024-10-05 16:10:44 发布

阅读量77

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_59487699/article/details/122200508

版权

推荐书籍《深入浅出webpack》网页链接：深入浅出 Webpack · 深入浅出 Webpack

什么是webpack？

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。

模块化 可以使复杂的程序细化成为各个小的文件
预处理器 可以对Scss，less等CSS预先进行处理

1.核心

① 入口(entry)
② 输出(output)
③ loader
④ 插件(plugins)

2.优势

① 模块化开发（import，require）
② 预处理（Less，Sass，ES6，TypeScript……）
③ 主流框架脚手架支持（Vue，React，Angular）
④ 庞大的社区（资源丰富，降低学习成本

概念

本质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。

当 webpack
处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)_，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个
_bundle 。

安装

确保安装了nodejs

项目文件环境

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

本地安装

npm install --save-dev webpack
npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装

准备文件

-- dist 文件生成目录
---- index.html 

-- index.js 主入口文件
-- header.js 需要被index引入的文件

#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->


#  index.js
import {header} from './header.js'
document.body.append(header);


#  header.js
var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

执行命令打开index.html

npx webpack index.js
// 在你的项目目录执行 这里的名称是 mypack

然后打开你的dist/index.html 查看网页文件
同时你会发现在 dist目录多个main.js这个打包生成好的js文件

使用配置文件

在项目目录新建一个webpack.config.js
webpack默认配置文件

const path = require('path')
// 引入node的 path路径模块

module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}
// module.export node中导出模块的意思

# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

执行命令npx webpack实现打包

配置 scripts

找到package.js 配置scripts

"scripts":{
    start:  "webpack"
}

这样我们就可以执行

npm run start
// yarn start

配置模式

const path = require('path')
module.exports={
    mode:'development', //开发模式
    // mode:'production',// 产品模式
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')

产品模式打包的大小要比生产模式要小的多。

 "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

未完待续。。。。