webpack的三种用法
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的三种用法的更多相关文章
- using 的三种用法
using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...
- Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
- .NET(c#)new关键字的三种用法
前几天去家公司面试,有一道这样的题:写出c#中new关键字的三种用法,思前想后挖空心思也只想出了两种用法,回来查了下msdn,还真是有第三种用法:用于在泛型声明中约束可能用作类型参数的参数的类型,这是 ...
- SQL、LINQ、Lambda 三种用法(转)
SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA1. 查询Student表中的所有记录的Sname.Ssex和Class列.select sname, ...
- c# new关键字的三种用法
三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成 ...
- java中 this 的三种用法
Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...
- 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。
子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...
- java中 this 关键字的三种用法
Java中this的三种用法 调用属性 (1)this可以调用本类中的任何成员变量 调用方法(可省略) (2)this调用本类中的成员方法(在main方法里面没有办法通过this调用) 调用构造方法 ...
- C++学习---- virtual的三种用法
virtual用法一:多态 #include<iostream> using namespace std; class A{ public: virtual void display(){ ...
随机推荐
- mysql一个非常实用解决sql查询优化的函数explain
前言: 项目中有个表有几万条数据,然后还要关联其他表,查询条件也有点多,再没有其他查询条件下,默认时间查询条件如果是查一年的数据的话,查询时间那是慢得可怕. 找总监去优化sql,看他用了一个sql函数 ...
- springmvc的前端控制器
<servlet> <servlet-name>xxx</servlet-name> <servlet-class>org.springframewor ...
- C#给字符串赋予字面值——字符串插入、转义序列的使用
1.占位符.字符串插入 给字符串赋予字面值时,经常遇见在字符串中包含变量的情况,用连接符进行拼接.转换的方式比较麻烦.还容易出错.C#提供了较为便捷的处理方式,即‘占位符’,以及C#6的新功能‘插入字 ...
- 一、Log4Net配置
Core的配置 一.创建core包含控制和视图的项目以及Log4Net引用 二.创建Log4Net配置文件 右击项目->添加文件 Log4Net.config 2 复制以下代码 以下配置可做 ...
- bugku 逆向 love
可以看到将输入先经过 sub_4110BE 这个函数进行加密 然后每一位加上下标本身 再和str2比较 正确就是right 点开加密函数: 关键语句就在这里 我们可以看到是算输入的字符按三个一组能分为 ...
- 快速搭建一个vue开发环境
常规的搭建就是从npm到vue到webpack这样一个一个的来,这样一套下来说不上复杂但是也不简单.之前公司的vue后台项目 我还是写的轻车熟路的,因为前端同事已经把架子搭好了,环境配置的丝般顺滑,你 ...
- Jetson TX1安装pyTorch
https://www.ncnynl.com/archives/201705/1629.html https://blog.csdn.net/qq_36302589/article/details/8 ...
- Comet OJ Contest #2
A:暴力,显然每两次至少翻一倍. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf ...
- css 图像热区
CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...
- 实验二 Java面向对象程序设计实验报告
实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验 ...