浅谈webpack打包步骤及实际案例

最新推荐文章于 2024-04-27 08:39:59 发布

上上迁

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量308

点赞数

分类专栏：浅谈VUE 文章标签： vue html

上上迁

本文链接：https://blog.csdn.net/aa327056812/article/details/110454050

版权

浅谈VUE 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

前言
- 目标
- 关键字及命令
一、定义
- 为什么需要打包？
二、使用及场景
参考

前言

目标

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>
          密&emsp;码：<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/

多留言多点赞你们的只支持是我坚持下去的动力，都支棱起来！！！

上上迁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈webpack打包步骤及实际案例

文章目录前言目标关键字及命令一、定义为什么需要打包？二、使用及场景1 导入需要打包的依赖2 创建HTML文件导入打包的依赖3 创建打包类 webpack.js4 打包5 导入html参考前言目标1 掌握基本的打包命令2 掌握打包步骤关键字及命令export default XXXXnpm install --save-dev webpacknpm install webpack webpack-cli --save-dev，，，，，一、定义Webpack 是一个前端资源的打包工具
复制链接

扫一扫