一、文件结构

二、index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <!-- 在b.js中使用node的module.exports输出模块后，然后在a.js中使用require('./b')-->

     <!-- 就可以实现a.js和b.js的数据共享了,也就不再需要引入b.js了  -->

     <!-- 尽管如此，浏览器还是无法识别后端node语言，所以就需要webpack来实现 -->

     <!-- webpack把node后端代码变成能让浏览器识别的前端语言，并且管理所有的依赖 -->

     <!-- <script src="b.js"></script> -->

     <!-- <script src="a.js"></script> -->

     <!-- 关于安装和配置webpack -->

     <!--

         一般使用局部安装（安装在某个项目内）

         1. 初始化npm

             npm init -y

             生成package.json,npm就认为整个目录就是一个项目(模块)了

         2. 用npm安装webpack

             npm i webpack -D 或者 npm i webpack --save-dev

             安装的webpack版本信息会在package.json中可以看到，表示安装成功

             同时项目里会生成一个node_modules文件夹，其中目录下.bin/webpack

         3.使用webpack来生成管理依赖的pack.js文件(文件名自定义即可)

             a.首先将webpack的路径放进package.json的scripts属性里，

                 "scripts": {

                     //key可以自定义,在这里我使用pack来命名,会用于执行命令npm run pack

                     "pack":"node_modules/.bin/webpack"

                 },

             b.在项目内创建webpack.config.js文件，并做以下设置

                 module.exports = {

                 // 入口文件，第一个依赖文件

                 entry:'./a',

                 // 出口文件，文件名和存放路径(均可自定义)

                 //_dirname表示当前目录

                 output:{

                     filename:'pack.js',

                     path:__dirname

                 }

             c.引入pack.js文件

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

             d.命令行终端使用以下命令生成pack.js文件

                 npm run pack

             e.在浏览器运行html文件

      -->

     <!-- 其中a.js是第一个依赖，也就是入口文件。 pack.js是管理所有依赖的文件 -->

     <!-- 最后只需要引入一个webpack生成的pack.js文件就可以了 -->

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

 </body>

 </html>

三、a.js

 // 表示需要b.js文件里的msg变量

 // var msg = require("./b").msg;

 // console.log("msg:",msg);

 // ES6新语法(注意：和上面node写法不能同时使用,否则报错！)

 import {newMsg} from './b';

 console.log("newMsg:",newMsg);

四、b.js

 var msg = 'Yo.';

 var newMsg =  1;

 // 输出模块，其中这个模块对象里有一个msg属性，其值就是变量msg

 //依赖b.js的a.js使用require('./b').msg来进行调用msg变量

 // module.exports = {msg:msg};

 // ES6新语法(注意：和上面node写法不能同时使用，否则报错！)

 export {newMsg};

五、webpack.config.js

 module.exports = {

     // 入口文件，第一个依赖文件

     entry:'./a',

     // 出口文件，文件名和存放路径

     output:{

         filename:'pack.js',

         path:__dirname

     }

 }

六、浏览器运行效果

七、谢谢观看，如有问题，欢迎交流

Vue之webpack的安装与配置及其简单应用的更多相关文章

  1. 开源IDE CodeBlocks的下载安装、配置、简单编程

    如果没有集成开发环境(IDE),在linux下开发程序将非常繁琐,IDE是指将编辑.编译.调试等功能集成在一个桌面环境上,这样就大大方便了用户.IDE一般包括代码编辑器.编译器.调试器和图形界面用户工 ...

  2. CodeBlocks的下载安装、配置、简单编程

    CodeBlocks的下载安装.配置.简单编程 IDE简介 http://www.baidu.com/s?wd=codeblocks ,这里只是介绍Windows平台下的IDE环境配置. CodeBl ...

  3. idea npm vue java开发工具安装 环境配置

    感谢此链接内容作者,从前往后流程较完整详细,助我成功配置好(不知道在这之前做的一些尝试有没有影响) https://blog.csdn.net/qq_42564846/article/details/ ...

  4. Vue学习笔记-VSCode安装与配置

    一  使用环境: windows 7 64位操作系统 二  VSCode安装与配置  1.下载: https://code.visualstudio.com 直接点击即可. 2. 点击按装程序,默认安 ...

  5. C# 日志输出工具库—log4net 安装、配置及简单应用

    1.下载和安装 注意每次安装只是安装到本项目中,换了另一个项目需要再次安装和配置. 我使用的是Visual Studio 2013 社区版,在tools中找到NuGet包管理. 搜索log4net并点 ...

  6. Webpack的安装、配置与执行

    先用npm安装 npm install webpack -g 然后在项目路径下进行项目安装 npm init # 会自动生成一个package.json文件 npm install webpack - ...

  7. webpack的安装个配置

    webpack在node下运行,首先先安装node 安装在全局:npm install webpack -g 在任何目录都可以运行 安装在局部:npm init -y npm install webp ...

  8. phpRedis安装、配置及简单使用

    安装phpRedis前,请先安装Redis,再安装phpRedis插件. 1.下载安装 在linux服务器上,命令行执行以下命令(cd ./usr local/src 一般源码放在这里(推荐源码安装) ...

  9. nginx安装及配置为简单的文件服务器

    centos 6.5 直接yum安装即可 yum install nginx -y 配置文件位于:/etc/nginx/nginx.conf,里面可以修改处理器数量.日志路径.pid文件路径等,默认的 ...

随机推荐

  1. .net core/.net 使用 CommandLineParser 来标准化地解析命令行

    CommandLineParser 是一款用于解析命令行参数的 NuGet 包.你只需要关注你的业务,而命令行解析只需要极少量的配置代码. 本文将介绍如何使用 CommandLineParser 高效 ...

  2. 抽象类 abstract class 接口

    一.抽象类 1.没有具体的实例. 不可实例化,不能创建对象. 2.抽象类有构造器. 二.abstract 方法. 1.没有方法体. 子类必须重写抽象类的所有抽象方法,才能实例化,否则子类也为抽象类. ...

  3. python装饰器2

    装饰模式有很多经典的使用场景,例如插入日志.性能测试.事务处理等等,有了装饰器,就可以提取大量函数中与本身功能无关的类似代码,从而达到代码重用的目的.下面就一步步看看Python中的装饰器. 一个简单 ...

  4. Eclipse Jobs 和后台进程

    Eclipse后台进程 1.主线程(Main thread) 一个Eclipse客户端只能跑一个进程,但却可以创建很多线程. 在Eclipse框架中,会用一个单线程去运行所有的代码指令,这个线程执行客 ...

  5. span元素和div元素的浮动效果

    首先看一段代码: <style> #right {margin: 10px;float:right;color:red;} #left {float:left;color:blue;} & ...

  6. linux命令格式及who、whoami、su和passwd命令

    linux命令格式及who.whoami.su和passwd命令 1. Linux命令的格式 Linux命令的语法格式: 命令 [选项] [参数] 命令格式中命令.选项.参数的具体含义: 命令:告诉L ...

  7. cloud-music

    非常感谢那些无私开源的程序员,希望我也能够有能力像你们那样,开源很多很有意思的东西~~ //index.html <!DOCTYPE html> <html> <head ...

  8. mysql锁机制之行锁(四)

    前言 顾名思义,行锁就是一锁锁一行或者多行记录,mysql的行锁是基于索引加载的,所以行锁是要加在索引响应的行上,即命中索引,如下图所示: InnoDB 支持多粒度锁(multiple granula ...

  9. 【JZOJ4855】【NOIP2016提高A组集训第6场11.3】荷花池塘

    题目描述 于大夫建造了一个美丽的池塘,用来让自己愉快的玩耍.这个长方形的池子被分割成了M 行 和N 列的正方形格子.池塘中有些地方是可以跳上的荷叶,有些地方是不能放置荷叶也不 能跳上的岩石,其他地方是 ...

  10. 【7.18总结】KM算法

    先贴代码,参考博客来源于:https://blog.csdn.net/zyy173533832/article/details/11519291#commentBox 例题:HDU 2255 题意:n ...