一、文件结构

二、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. 2-2 Numpy-矩阵

    # !usr/bin/env python # Author:@vilicute import numpy as np # 矩阵的创建 matr1 = np.mat("4 2 3;4 5 6 ...

  2. day38 21-今天的内容总结

    以前我们在web层里面去调Service再在Service里面去调DAO是一路new过去的,在web层里面new Service,然后在Service里面new DAO.每次你都需要主动去找这个对象. ...

  3. 详解php中空字符串和0之间的关系

    $_x=$row["x"];$_y=$row["y"];if(isset($_x) && isset($_y)){if($row["y ...

  4. GeoServer手动发布本地Shapefile地图

    首先,本文实现的结果图给大家展现一下: 放大的样子: 颜色是通过属性中某个字段值来分级的,可以自定义. 上面功能是用ArcGIS切片好数据,在Geoserver 中发布,并用google地图作为底图展 ...

  5. li设置多选和取消选择的样式、输入数据类型判断

    li设置多选和取消选择的样式: $('li').click(function(){ if($(this).hasClass('active')) {$(this).removeClass('activ ...

  6. mkdir、touch、rm和rmdir命令

    一.mkdir命令 mkdir命令用来创建目录.该命令创建由dirname命名的目录.如果在目录名的前面没有加任何路径名,则在当前目录下创建由dirname指定的目录:如果给出了一个已经存在的路径,将 ...

  7. 【Django入坑之路】Django后台上传图片，以及前端的显示

    #setting配置: MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR, "media") # ...

  8. 启动Jmeter录制代理进行录制，报 jmeter.protocol.http.proxy.ProxyControl

    使用jmeter代理录制Http请求时,启动HTTP(S) Test Script Recorder报jmeter.protocol.http.proxy.ProxyControl, 日志为: 201 ...

  9. Effective C++: 06继承与面向对象设计

    32:确定你的public继承塑模出is-a关系 以C++进行面向对象编程,最重要的一个规则是:public继承表示的是"is-a"(是一种)的关系. 如果令class D以pub ...

  10. 1.27eia原油