webpack入门使用（一）

最新推荐文章于 2024-07-12 17:44:39 发布

爱敲代码的小魏

最新推荐文章于 2024-07-12 17:44:39 发布

阅读量532

点赞数

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

本文链接：https://blog.csdn.net/weixin_48463527/article/details/122197973

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什是webpack？

webpack是一款很火的打包工具，把依赖的文件生成一个图，打包成文件当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。webpack中文官网：

webpackwebpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/

webpack核心概念

1.入口：enter
2.出口：output
3.加载器：loader
4.插件：plugin
5.模式：mode
6.本地服务器：dev Server

wecpack的优缺点

webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

webpack安装

初始化项目

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

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

安装

npm i webpack webpack-cli -D

准备文件

-- 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.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',
    }
}

接下来配置scripts

在项目根目录中找到package.js 配置scripts

"scripts":{
    "build": "webpack",
    "serve":  "webpack serve"
}

配置本地服务实现自动打开浏览器以及热更新

module.exports = {
    ..., // 省略了前面的内容
    devServer:{
		open:true,//自动打开浏览器
		hot:true,//热更新
		host:"localhost",//本地域名
		port:8080,//端口号
		proxy:{}//同vue.config.js 里面的代理配置
	}
}

使用 npm run build 打包 npm run serve打开项目

爱敲代码的小魏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门使用（一）

什是webpack？webpack是一款很火的打包工具，把依赖的文件生成一个图，打包成文件当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpack中文官网：webpackwebpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）...
复制链接

扫一扫