一、文件结构

二、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. JPA 将驼峰列名自动转换为_

    数据库中和代码中都没有'cat_age'列名:但是用jpa保存的时候,总是提示此错误:这个问题纠结半天,后来在朋友的指点下,找到问题所在: spring data  jpa 使用默认策略是Improv ...

  2. 50道python面试题

    1.大数据的文件读取 ① 利用生成器generator ②迭代器进行迭代遍历:for line in file 2.迭代器和生成器的区别 1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方 ...

  3. at: 安排一个任务在未来执行，需要一个atd的系统后台进程

    检查atd进程是否启动 [root@centos61 桌面]# service atd status atd (pid  2274) 正在运行... [root@centos61 桌面]# chkco ...

  4. 【水滴石穿】react-native-ble-demo

    项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...

  5. JAVA-WEB-错误之-'OPTION SQL_SELECT_LIMIT=DEFAULT'

    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version ...

  6. oracle-Restrict权限

    启动数据库并把它置于open模式,直给拥有restricted session权限的用户赋予访问权. Alter system disable restricted session; 另外,启动时,o ...

  7. 微服务开源生态报告 No.4

    「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...

  8. 1.27eia原油

  9. WPF 2048游戏的实现

    原文:WPF 2048游戏的实现         前几天空闲的时候,实现了一个2048游戏.除了可以设置行数和列数之外,支持修改显示名称,比如下面,改成神雕侠侣中的角色名称:           游戏 ...

  10. COGS 775 山海经

    COGS 775 山海经 思路: 求最大连续子段和(不能不选),只查询,无修改.要求输出该子段的起止位置. 线段树经典模型,每个节点记录权值和sum.左起最大前缀和lmax.右起最大后缀和rmax.最 ...