entry(入口文件)

可以传字符串,数组,对象三种格式(字符串和数组默认生成main.js,均生成一个文件,对象有几个入口文件,生成几个文件)。默认值为./src/index.js。entry可以传相对路径,也可以为绝对路径。

//字符串格式如下

//数组格式如下:

用途:

  在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用

//对象格式如下

用途:

  分离 应用程序(app) 和 第三方库(vendor) 入口

  

  多页面应用程序

  

output(输出)

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

1)filename,输出文件的文件名,可省略

2)path,目标输出目录的绝对路径,可省略

webpack.config.js配置如下:

path不配置默认值为./dist

filename不配置默认生成entry属性名的文件

如上,会生成./dist/newfile1/newmain1.js和./dist/newfile1/newmain2.js,即:

loader

loader能够让webpack去处理非js文件(webpack本身只理解js文件)

loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后就可以利用webpack的打包能力对它们进行处理

本质上,webpack loader将所有类型的文件,转换为应用程序的依赖图(和最终的bundle)可以直接引用的模块

如上图:

‘嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.css' 的路径」时,在你对它打包之前,先使用css-loader,style-loader 转换一下(即转换为你认识的模块)’

  

webpack基本配置文件的更多相关文章

  1. webpack 使用配置文件

    webpack入门     大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件.这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件 新建 webpa ...

  2. 跟我一起学习webpack使用配置文件(二)

    接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...

  3. webpack基本配置文件(含解释)

    const path = require('path'); // 以下文件需要npm i 文件名 --save-dev const uglify = require('uglifyjs-webpack ...

  4. webpack的配置文件

    1.路径 __dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径 module.exports={ // __dirname是nodejs里的一个全局 ...

  5. webpack的配置文件entry与output

    在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果outpu ...

  6. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

  7. webpack的配置文件[webpack.config.js]

    如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...

  8. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  9. react暴露webpack配置文件

    在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹 ...

随机推荐

  1. FPGA复位的可靠性(转)

    FPGA复位的可靠性(同步复位和异步复位)  reference:http://www.eetop.cn/blog/html/17/743817-24442.html 一.特点: 同步复位:顾名思义, ...

  2. js实现网页全屏切换(平滑过渡),鼠标滚动切换

    实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...

  3. 『转』credential Provider 简易改写攻略

    本次小学期的题目是windows下的凭证改编.本人负责的是Win7 下的credentials Provider 的编写以及其他杂七杂八的工作.当然给我印象最深的就是credentials provi ...

  4. elasticsearch内存优化设置

    1.禁用交换分区 最简单的选项是完全禁用交换,通常elasticsearch是在框上运行的唯一服务,内存由ES_HEAP_SIZE环境变量控制,设有必要启用交换分区 linux:swapoff -a ...

  5. VC下CString类型与int 、float等数据类型的相互转换

    一.常用转换 1. CString --> int转换 CString str("1234");    int i= _ttoi(str); 2. CString --> ...

  6. python-oop的理解

    OOP是面向对象编程,特征分别是封装.继承.多态.抽象. 封装:封装是指将对象信息状态通过访问权限修饰符隐藏在对象内部,不允许外部程序直接访问,如果外部程序要访问对象内部,可以调用内部提供的get或s ...

  7. diary of laravel

    1.  修改数据库连接 初始化数据库:   首先: 修改 config- database.php 中的 数据库链接 其次:修改   .env 中数据库链接 创建表: php artisan migr ...

  8. Spring MVC — @RequestMapping原理讲解-1

    转载地址 :http://blog.csdn.net/j080624/article/details/56278461 为了降低文章篇幅,使得文章更目标化,简洁化,我们就不例举各种@RequestMa ...

  9. 单点登录系统---SSO

    1.------------------SSO介绍--------------------------------- 有什么卵用?搞什么飞机的? 大家看看这个图,一个系统是没有问题.如果是分布式的系统 ...

  10. 第七十七课 最小生成树(Kruskal)

    添加kruskal算法: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPoin ...