1.直接命令行使用。
2.node.js API的使用方式。
3.webpack / webpack--config webpack. dev.config.js

//根目录创建 webpack.config.js
//根目录参数 moule.export={
entry : './src/script/main.js', //打包从这个js开始 入口文件
output:{
path: './dist/js' , //打包后放在那个文件 自动生成
filename:'bundle.js' //文件名
}
}
一、entry
1、三种输入方式
(1)string,输入字符串
entry:{
main:'./src/script/main.js'
},
(2)array, 数组。适用情况:两个平行的,不相依赖的文件打包在一起。
entry:{
main:['./src/script/main.js','./src/script/a.js']
},
(3)object, 适用情况:多页面应用程序。这里要和output里的[name]占位符配合使用,威力才能最大。如果你要打包成多 个js文件,那么entry对象里的key叫做chunk就是文件名,里面的值就是需要打包的文件里面包含的文件。
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},
二、output
1、占位符有3种:[name]、[hash]、[chunkhash]
2、output的filename
(1)hash: 这次打包的hash
每次终端运行webpack命令,都会生成一段信息,这段信息的第一行就有一个hash
(2)chunkhash:每一个chunk自己的hash
3、output的path,//这里配置的是输出的文件地址

npm install css-loader style-loader --save-dev

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

webpack --watch

webpack hello.js hello.bundle.js
C:\Users\Administrator\Desktop\tiger\webpack-test

webpack的三种用法的更多相关文章

  1. using 的三种用法

    using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...

  2. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  3. .NET(c#)new关键字的三种用法

    前几天去家公司面试,有一道这样的题:写出c#中new关键字的三种用法,思前想后挖空心思也只想出了两种用法,回来查了下msdn,还真是有第三种用法:用于在泛型声明中约束可能用作类型参数的参数的类型,这是 ...

  4. SQL、LINQ、Lambda 三种用法(转)

    SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA1. 查询Student表中的所有记录的Sname.Ssex和Class列.select sname, ...

  5. c# new关键字的三种用法

    三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成 ...

  6. java中 this 的三种用法

    Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...

  7. 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。

    子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...

  8. java中 this 关键字的三种用法

    Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...

  9. C++学习---- virtual的三种用法

    virtual用法一:多态 #include<iostream> using namespace std; class A{ public: virtual void display(){ ...

随机推荐

  1. 1、Mysql无法创建外键的原因 2、MySql 外键约束 之CASCADE、SET NULL、RESTRICT、NO ACTION分析和作用

    在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  2. RedisCache 缓存

    /// <summary> /// 这是包装过公用的,用于本站而已. /// </summary> /// <author>rixiao</author> ...

  3. web services + soap + wsdl 学习

    什么是web services? 应用程序组件: 使用开放协议进行通信: 独立(self - contained )并可自我描述: 可通过使用UDDI来发现: 可被其他应用程序使用: XML是Web ...

  4. C语言博客作业02--循环结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 经过本周学习,对c循环结构有了深入,无论是单层循环结构还是嵌套循环结构的问题,我都学会有一定的解决能力, ...

  5. 继收购Magento十个月,Adobe推出Commerce Cloud商务云服务

    去年 5 月,软件巨头 Adobe 以 16.8 亿美元的价格,受过了 Magento .在经历了十个月的业务整合后,该公司终于推出了全新的 Commerce Cloud 商务云服务.据悉,其本质上是 ...

  6. Mint-UI Picker 三级联动

    Mint-UI Picker组件的三级联动 HTML: <mt-picker :slots="slots" value-key="name" @chang ...

  7. html2canvas 识别 svg 解决方案

    参考: 预览地址 http://jsfiddle.net/bv16o50f/1/ html <div class="visualization"> <svg xm ...

  8. vue stylus 格式化问题

    IDE是vscode 安装了.vetur插件 由于stylus可以仅用缩进不用写大括号之类的,所以十分方便, 但有个问题,按alt shift F 格式化时,vetur这个插件会默认添加上正常css的 ...

  9. Docke--利用 commit 理解构建镜像

    Docker 利用commit理解构建镜像 镜像是容器的基础,每次执行 docker run 的时候都会指定哪个镜像作为容器运行的基础.当我们使用Docker Hub的镜像无法满足我们的需求时,我们就 ...

  10. 一加3T 误清除data 恢复数据

    数据丢失经过:日常用机无备份直接操作:装google框架后,rootexplorer文件浏览器删除多余google应用导致无法开机:开机不成功应该重刷入google gapps包,并没有这样操作而是进 ...