Webpack前端打包工具

1、概述

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

中文官方网站：https://www.webpackjs.com/
打包的作用：

- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。

2、Webpack四个核心概念(四个核心会写在配置文件里webpack.config.js)

入口(entry)

webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，
寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

输出(output)

出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

加载器（loader）

webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），
例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

插件(plugins)

插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，
或者是对打包功能进行优化、压缩，提高效率。

3、安装

安装后在package.json中会有vue-router和webpack-cli

4、打包js

4.1、编写配置文件webpack.config.js

配置文件里指定入口和出口、加载器、插件、不过加载器和插件是可选的

module.exports={entry:'./src/main.js', //指定打包的入口文件output:{path: __dirname+'/dist', //出口目录filename: 'build.js' //输出的js文件名},
}

4.2、入口entry

在src下新建一个main.js、把原来html中的js代码全部移动到main.js中

main.js

import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'
import './css/main.css'
Vue.use(VueRouter)// 创建VueRouter对象
const router = new VueRouter({routes:[ // 编写多个路由规则{path:"/login", // 请求路径component:loginForm // 组件名称},{path:"/register",component:registerForm},]
})
var vm = new Vue({el:"#app",components:{// 引用登录和注册组件loginForm,registerForm},router
})

//登录模板
const loginForm = {template:`\<div>\<h2>登录页面</h2>\用户名：<input type="text" ><br/>\密码：<input type="password"><br/>\    </div>\`
}
export default loginForm;

//注册模板
export default {template:`\<div>\<h2>注册页</h2> \用户名：<input type="text"><br/>\密码：<input type="password"><br/>\确认密码：<input type="password"><br/>\</div>\   `
}

这样、main.js就成了整个配置的入口了

4.3、出口output

在根目录下新建目录dist、用于在配置文件中配置出口目录

4.4、执行换打包：

npx webpack --config webpack.config.js

查看dist目录：如果有build.js说明打包成功

4.5、测试

index.html、引入build.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><!--router-link来指定跳转的路径--><span><router-link to="/login">登录</router-link></span><span><router-link to="/register">注册</router-link></span><hr/><div><!--vue-router的锚点--><router-view></router-view></div></div><script src="../dist/build.js"></script>
</body>
</html>

Webpack前端打包工具相关推荐

我知道的webpack前端打包工具（一）
这些天,毕业那点事,到现在终于能腾出空来了. 今天Eknow想总结的是自身所掌握的webpack知识以及对webpack的一些见解. 先来看一下github对webpack的相关介绍简单的来讲呢,就 ...
前端打包工具rollup、webpack、vite的区别
前端打包工具rollup.webpack.vite的区别文章目录前端打包工具rollup.webpack.vite的区别一.结论二.rollup 三.webpack 1. 核心概念 2. 重要 ...
webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
vite（一）前端打包工具发展史
现如今前端打包工具最火的无疑是vite!但是vite也不是凭空产生的,而是踩着前人肩膀发展起来的.所以在学习vite之前,有必要了解前端打包工具发展史. 前端打包工具发展史分为哪些阶段? 每一次前端打 ...
前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发.module bundler 将所有文件串联起来变成了必须. JavaScript 社区中有很多程序的打包工具 ...
前端打包工具webpack和Vite
我们见证了 webpack.Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验. 但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器,文件修改后的效 ...
五分钟学会前端打包工具webpack
可以做的事情代码转换.文件优化.代码分割.模块合并.自动刷新.代码校验.自动发布最终目的 webpack的基本配置 webpack的高级配置 webpack的优化策略 ast抽象语法树 webpa ...
前端打包工具-webpack和rollup的区别
开门见山 2017年4月初,Facebook 将一个巨大的 pull 请求合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动促使一些人发很 ...
前端打包工具 Esbuild
JavaScript 社区中有很多程序的打包工具,如 Webpack.Rollup.Parcle 等,它们都是使用 JavaScript 开发,性能方面有很多不足. 而 Esbuild,采用 Go 语 ...