《webpack5 实战一》之js/json打包

星宇大前端

发布于 2021-04-12 17:23:26

8550

发布于 2021-04-12 17:23:26

文章被收录于专栏：大宇笔记大宇笔记

前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。

webpack实战系列专栏
webpack实战源码
webpack官网文档

首先，简单的打包默认的js和json的例子。

目标过程分解

目标：webpack打包js/json，html中验证结果

webpack 默认支持打包js/json 文件
编写js文件和json文件
使用webpack脚本打包
html引入打包文件验证结果

代码实现

项目目录lerna + yarn workspace 的方式monorepo，默认安装webpack。

1、创建js文件和json文件

{
    "name":"德玛西亚",
    "skill":"大保健"
}

import hero from "./hero.json";

function packageJs(bigbang) {
    console.log(bigbang);   
    console.log(hero);   
}

packageJs('寒冰射手')

2、创建打包目录dist 和 webpack打包

打包开发环境指令

webpack ./src/index.js -o ./dist/app.js --mode=dovelopment

打包完之后代码没有压缩，可以看到代码结构

打包生产环境指令

webpack ./src/index.js -o ./dist/app.js --mode=dovelopment

生产环境代码会压缩

3、html验证

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