Webpack入门根本知识及案例
webpack信赖各人都已经不陌生了，应用步调的静态模块打包工具。前面我们总结了vue，react入门根本知识，也分别做了vue3的实战小案例，react的实战案例，那么我们怎样使用webpack对项目举行模块化打包呢？ 话不多说，开始！！目次
一、认识webpack的告急功能
二、Webpack的焦点概念
三、使用webpack5搭建脚手架
1.然后实行npm init 举行初始化， npm install webpack webpack-cli
2.在项目src文件夹下新建main.js和 tools>index.js文件
3.打包index.html文件
4.打包css文件。假如我们想创建一个css呢？
5.如那边理图像资源呢？
6.babel的转化
7.处置处罚.vue末端的文件
8.怎样自动运行打包后的index文件
一、认识webpack的告急功能
1. 模块打包：将项目中的全部模块（JavaScript、CSS、图片等）看成一个团体，通过依赖关系将它们打包成一个或多个静态资源文件
2.依赖管理：Webpack可以分析模块之间的依赖关系，根据设置的入口文件找出全部依赖的模块，并将其整合到打包效果中
3.文件转换：Webpack本身只能处置处罚JavaScript模块，但通过加载器（Loader）的使用，可以将其他范例的文件（如CSS、LESS、图片等）转换为有效的模块，使其可以大概被打包到终极的效果中
4.代码拆分：Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能
5.插件体系：Webpack提供了丰富的插件体系，可以通过插件实现各种功能的扩展，比方压缩代码、自动天生HTML文件等
总之，Webpack的告急功能是将项目中的多个模块打包成一个或多个静态资源文件，并提供了丰富的功能和插件体系来满意前端开辟的需求
二、Webpack的焦点概念
Webpack的焦点概念包罗entry（入口）、output（输出）、loader（加载器）和plugin（插件）
1.Entry 【入口文件】， 指定Webpack的入口文件，Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件；
2.Output【输出】义打包输出的文件及路径，指定Webpack打包后的文件输出的路径和文件名
3.Loader【加载器】Webpack本身只能处置处罚JavaScript模块，但通过Loader的使用，可以处置处罚其他范例的文件（如CSS、LESS、图片等）
4.Plugin【插件】 插件用于扩展Webpack的功能。它可以在打包的差别阶段实行特定的使命。比方，可以使用插件来压缩代码、拆分代码、天生HTML文件等。插件通过在Webpack设置中引入并实例化，然后将其添加到plugins数组中。
三、使用webpack5搭建脚手架
1.然后实行npm init 举行初始化， npm install webpack webpack-cli
npm init //初始化 npm install webpack webpack-cli//安装webpack以及webpack-cli依赖包检察项目package.json文件 已经有webpack干系版本信息
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNmFiZDQxYWVhMGI2NGI3ZDhmNjUyYTcyMDQ1YzRiNGMucG5n
2.在项目src文件夹下新建main.js和 tools>index.js文件
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvY2RlZmYxNzFjMTgxNGVjZWE0ZTlkZmIwM2U2MDgxYWQucG5n
main文件内容
// mian.js文件
import {add} from '/src/tools/index'
console.log(add(2,3)); 修改我们public文件夹下的index.html 文件
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMDNjYzEwZjI1OWVhNDcyNzk3YjU0NzQ5MjllZmRmNWEucG5n
在根目次新建 webpack.config.js文件 设置初入口文件信息
//webpack.config.js文件
const path = require("path")
module.exports = {
mode: 'development', // 指定为开发模式
// 入口文件
entry: {
main: './src/main.js'
},
// 出口文件
output: {
// 输出到dist文件夹(打包自动生成)
path
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]