一、文件结构

二、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. js数组求交集

    求两个数组的交集 var arr1 = [1,2,3]; var arr2 = [2,3,4]; var arr3; arr3 = arr1.filter(function(num) { return ...

  2. 推荐一个好用的git图形化工具

    之前一直用的是SmartGit,虽然贼好用,但是是收费的. 现在看到了一款免费也非常炫酷的工具,忍不住强烈推荐一下GitKraken rebase,cherry pick啥的用挺好用

  3. CMake学习笔记五-依赖库添加

    # # 项目名称 # SET(WIS_PROJECT_NAME EXAMPLE) # dependencies SET(DEPENDENCIES #依赖第三方库 ) #Qt模块 SET(QT_MODU ...

  4. 【JZOJ4745】【NOIP2016提高A组模拟9.3】看电影

    题目描述 听说NOIP2016大家都考得不错,于是CCF奖励省常中了 K 张变形金刚5的电影票奖励OI队的同学去看电影.可是省常中OI队的同学们共有 N(N >= K)人.于是机智的你想到了一个 ...

  5. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章：四元数（QUATERNIONS）

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章:四元数(QUATERNIONS) 学习目标 回顾复数,以及 ...

  6. 如何写JavaScript中的callback回调函数

    如何写回调函数? 如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数.下面就是一个简单的常见回调函数例子: function mySandwich(param1, param2, callba ...

  7. python 类（class）

  8. 封装好的MySQL.class.php类

    封装好的MySQL.class.php类 作用:数据库操作类 <?php header('content-type:text/html;charset=utf-8'); class MySQLD ...

  9. 集合--List&&ArrayList-LinkedList

    1.8新特性  List接口中的replaceAll()方法,替换指定的元素,函数式接口编程 List  元素是有序的并且可以重复 四种add();方法 ArrayList(用于查询操作),底层是数组 ...

  10. ios开发――解决UICollectionView的cell间距与设置不符问题

    在用UICollectionView展示数据时,有时我们希望将cell的间距调成一个我们想要的值,然后查API可以看到有这么一个属性: - (CGFloat)minimumInteritemSpaci ...