webpack看这一篇就够了_webpack看着一篇就够了-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59029708/article/details/128963836

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、webpack基本概念
二、 webpack的基本使用
- 1.webpack能做什么
- 2.创建项目
总结
3. webpack的配置
- 3.0_webpack-入口和出口

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack基本概念

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

二、 webpack的基本使用

1.webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

2.创建项目

新建项目目录，目录结构和之前的规范不同

根目录创建public
创建index.html

<body>
  <div>轮播图</div>
  <div>tabs标签页</div>
</body>

<script src="../src/index.js"></script>

总结

1.初始化包环境

yarn init

2.安装依赖包

yarn add webpack webpack-cli -D

3.配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

4.运行打包命令

yarn build

3. webpack的配置

3.0_webpack-入口和出口

目标: 告诉webpack从哪开始打包, 打包后输出到哪里

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

新建src并列处, webpack.config.js
填入配置项

	const path = require("path")

	module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

3.修改package.json, 自定义打包命令 - 让webpack使用配置文件

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