一、文件结构

二、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. Redis-cli 命令不能用

    bash: redis-cli: command not found... 环境: Linux7.X 在运行redis-cli命令的时候提示错误: 解决方案: 1. wget http://downl ...

  2. Python数据分析与展示[第三周]（pandas简介与数据创建）

    第三周的课程pandas 分析数据 http://pandas.pydata.org import pandas as pd 常与numpy matplotlib 一块定义 d=pd.Series(r ...

  3. pl/sql基础知识—过程快速入门

    n  过程 过程用于执行特定的操作,当建立过程时,既可以指定输入参数(in),也可以指定输出参数(out),通过在过程中使用输入参数,可以将数据传递到执行部分:通过使用输出参数可以将执行部分的数据传递 ...

  4. php json_encode输出为空问题

    这种情况一般是json_encode序列化数组时出现错误,错误原因有很多,可以通过json_last_error函数来查看错误原因!!! 可能的原因 ------------------------- ...

  5. python 错误类型

  6. phpexcel使用说明4

    <div class="postBody"> <div id="cnblogs_post_body"><p>PHPExcel ...

  7. 【转载】Combination Sum

    Combination Sum Given a set of candidate numbers (C) and a target number (T), find all unique combin ...

  8. 2016年中国的SaaS服务商企业研究

    近年来,随着中国人口红利的消退及移动互联网红利的凸显,让中国的To C创业,尤其是O2O领域的创业经历了一波高潮.2015年末,一场"资本寒冬"让O2O创业趋于理性,但SaaS及T ...

  9. java 简单实现FtpClient

    1. 引入喜闻乐见的maven地址 <dependency> <groupId>commons-net</groupId> <artifactId>co ...

  10. 伪元素 before 和 after 各种妙用

    大家可能对伪类和伪元素有点迷糊,在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 这里整理总结下: 有时你会发现伪类元素使 ...