1、运行webpack 在当前目录 管理员CMD下运行命令 :

webpack

PS： 只有安装webpack时才必须在管理员环境下运行，如今使用可以随便

问题1：

运行中会遇报错：

错误分析：
HTML 网页中，浏览器通过 script 标签加载 JavaScript 脚本。由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。在报错中了解到，是说无法在模块外部使用import语句，因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。

解决办法：

问题2：

错误分析 ：是因为这样引入问题

解决：

改成这样就好使用，不知为何，之前是可以省去.js的

----------------------------------------------------------------------------------

demo代码如下：

目录：

buld 是运行webpack自动生成的

mod1.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>mod1</title>

  </head>

  <body>

    <!--这里不需要./ 因为这不是nodejs，因为这是html给浏览器看的，浏览器没这要求 -->

    <script type="module" src="js/index.js"></script>

  </body>

</html>

webpack一次后当自动生成buld/bundle.js后这里可以改成这样，就会解决问题1和问题2的问题，不需要加type="module" 和

可写成：import * as mod1 from './mod1';
<script  src="buld/bundle.js"></script>

index.js

/*

    引入mod1.js中export的内容，引入用import

    *   引入所有

    ./  用webpack就必须写，当前文件（按ES6本身标准可以不写）但现在用webpack编译，webpack是nodejs写的要遵循nodejs约定，也就是说./是nodejs的规定，

    as,把所有的成员都引过来取一个共同的名字叫mod1,从当前目录下mod1.js取

    ./mod1 默认./mod1.js 都是JS文件

*/

//前边加载时<script  src="buld/bundle.js"></script>  这是就是对了，写成js/index.js就加上mod1.js

import * as mod1 from './mod1;

console.log(mod1.a,mod1.b)

如果输出c，结果会是undefined,因为c没加export，加上就可以输出了

mod1.js

// 只定义不输出在其它地方是用不了的

export  let a= 12;

export let b= 5;

let c = 6;

等价于：

let a= 12;

let b= 5;

let c = 6;

export {a,b}

webpack.config.js

const path = require('path');

// 需要对外输出json ——>{},CMD写法主要给nodejs看nodejs遵循CMD，

module.exports = {

    // 编译模式,生产模式(production),调试模式(development)

    mode:'development',

    //入口，并不是目录下上千个JS文件全部编译，需指定一个或多个入口，以这个作为起点来编译，用到谁编译谁，用不到的不编译；

    // 此处需要编译的文件index.js [有export(导出可编译),用webpack加./ nodejs要求]

    entry:'./js/index.js',

    /*

     * 1、output 出口 ,必须是{},并且至少要包含两个项目

     *    path:放到哪去。可以是当前目录的buiid下(path:'./build');

     *          一般情况下(90%)使用绝对路径更容易一些不会被坑，这里需要引入nodejs里的包叫path(帮助做路径上的操作)

     *          就是 :const path = resolve(_dirname，'build');(可以把路径解析成绝对路径)

     * (2)filename:文件名叫什么,bundle翻译'捆'打包之后的名随意,

     */

    output:{

        path:path.resolve(__dirname,'buld'),

        filename:'bundle.js'

    }

};

在当前html的所在文件夹下运行webpack 即可

PS：这里每运行一次执行一次webpack

第一个webpack例子demo1的更多相关文章

  1. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  2. 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

      [前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...

  3. 搭建一个webpack微服务器

    [前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来 ...

  4. 手写一个webpack，看看AST怎么用

    本文开始我会围绕webpack和babel写一系列的工程化文章,这两个工具我虽然天天用,但是对他们的原理理解的其实不是很深入,写这些文章的过程其实也是我深入学习的过程.由于webpack和babel的 ...

  5. SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子

    很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...

  6. 一个简单例子：贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  7. java连接mysql的一个小例子

    想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径 在eclipse中,Project的properties里面的java build path里面添加引用 连接成功的一 ...

  8. java操作xml的一个小例子

    最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...

  9. MVVM模式的一个小例子

    使用SilverLight.WPF也有很长时间了,但是知道Binding.Command的基本用法,对于原理性的东西,一直没有深究.如果让我自己建一个MVVM模式的项目,感觉还是无从下手,最近写了一个 ...

  10. Lea指令计算地址（用于四则混合运算），附上一个函数调用例子及其反汇编代码，很清楚

    比如你用local在栈上定义了一个局部变量LocalVar,你知道实际的指令是什么么?一般都差不多像下面的样子:     push   ebp     mov   esp,   ebp     sub ...

随机推荐

  1. 【每日一题】【DFS&每个点都调用一次前后左右】由1连接的岛屿数量-211031/220216

    给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网格的四条边 ...

  2. 前端知识之JS(javascirpt)

    目录 JS简介 JS基础 1.注释语法 2.引入JS的多种方式 3.结束符号 变量与常量 基本数据类型 1.数字类型(Number) 2.字符类型(string) 3.布尔类型(Boolean) 4. ...

  3. python 之匿名函数(lambda)

    什么是匿名函数?匿名函数就是不用def关键字,使用lambda关键字定义的一个函数.匿名函数简约而不简单. 匿名函数的格式: lambda[ paramters1, paramters2 , .... ...

  4. CTFshow——funnyrsa3

    题目如下: 题目分析: 发现常规rsa不存在的dp.查找资料知道 dp ≡ d mod (p - 1).意识到dp是解题关键,可能dp和n存在某种关系可以解出p或者去,跟之前有一题有点类似,求p和q之 ...

  5. [python] 基于blind-watermark库添加图片盲水印

    blind-watermark是一个能够给图片添加/解析基于频域的数字盲水印的Python库.图像水印image watermark是指在图片里添加文本或图形,以标记图片的来源.但是图像水印会破坏原图 ...

  6. [随笔所想] CSDN认证博客专家申请通过随笔所想

    本篇博客写于2020年5月13日晚,为了纪念CSDN博客专家申请通过. 2020年5月10日晚,也就是2020年的母亲节当晚提交了博客专家申请.在2020年5月13日上午,就知道博客专家申请通过啦!前 ...

  7. BBS项目 未完待续

    项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 创建项目配置 环境配置 TEMPLATES = [ { 'BACKEND': 'django.template. ...

  8. 1.【窗口组件】小部件-QWidgt

    一.前言 QWidget翻译过来是小部件的意思,QWidgt 类是所有用户界面对象的基类. 窗口部件是用户界面的一个基本单元:它从窗 口系统接收鼠标.键盘和其它事件,并且在屏幕上绘制自己.每一个窗口部 ...

  9. cordova第三方插件的创建,修改以及调试指南---真机调试，浏览器调试

    cordova使用以及真机调试,浏览器调试 创建插件 点击参考此文-- 超详细手把手教你cordova开发使用指南+自定义插件 插件修改注意事项--很重要 每次对自己代码目录里面任何内容进行修改后 都 ...

  10. angular + ng-zorro 表格后台分页及排序功能实现，angular + ng-zorro 表格排序不起作用解决办法

    angular + ng-zorro 表格排序不起作用是因为数据是从后端获取的,也是后端分页,所以要自己写排序啦~~~~ 举例:HTML <nz-table #basicTable nzBord ...