文章目录
- 前言
- 目标
- 关键字及命令
- 一、定义
- 为什么需要打包?
- 二、使用及场景
- 1 导入需要打包的依赖
- 2 创建HTML文件 导入打包的依赖
- 3 创建打包类 webpack.js
- 4 打包
- 5 导入html
- 参考
前言
目标
1 掌握基本的打包命令
2 掌握打包步骤
关键字及命令
export default XXXX
npm install --save-dev webpack
npm install webpack webpack-cli --save-dev
,,,,,
一、定义
Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当
webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用
程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
为什么需要打包?
- 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
- 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
- 将代码打包的同时进行混淆,提高代码的安全性。
二、使用及场景
实现简单登陆注册的打包引入
1 导入需要打包的依赖
// index.js
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router';
import loginForm from './login';
import registerForm from './register';
Vue.use(VueRouter);
// 创建vue对象
const router = new VueRouter({
routes: [ // 编写路由规则
// path: 路由请求路径;component:组件名称
{path: "/login", component: loginForm},
{path: "/register", component: registerForm}
]
});
var vm = new Vue({
el: "#app",
components: {
loginForm,
registerForm
},
router
});
//login.js
const loginForm={
template: `
<div>
<h2>登陆页</h2>
用户名:<input type="text"><br>
密 码:<input type="password">
</div>`,
}
export default loginForm;
// register.js
const registerForm = {
template: `
<div>
<h4>注册页</h4>
用户名:<input type='text'>
<br>
密码:<input type='password'>
<br>
<input type='submit' value='注册'>
</div>
`
};
export default registerForm;
2 创建HTML文件 导入打包的依赖
// webpack.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
3 创建打包类 webpack.js
module.exports={
entry:'./src/index.js', //指定打包的入口文件
output:{
// path: 输出的目录,__dirname是相对于webpack.config.js配置文件的绝对路径
path : __dirname+'/dist',
filename:'build.js' //输出的js文件名
}
}
4 打包
npx webpack --config webpack.config.js
5 导入html
<script src="../dist/build.js"></script>
参考
中文官方网站:https://www.webpackjs.com/
多留言多点赞你们的只支持是我坚持下去的动力,都支棱起来!!!