webpack中Entry与Output的基础配置
module.exports = {
// 这个文件要做打包，从哪一个文件开始打包
entry: './src/index.js',
// 打包文件要放到哪里去，就配置在output这个对象里
output: {
// 打包好的文件名字
filename: 'bundle.js',
/**
* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径
* __dirname指的是webpack.config.js所在的当前目录的这个路径
* 下面这个结合就是一个绝对路径
*/
path: path.resolve(__dirname, 'dist')
}
}
entry: './src/index.js'
entry: {
main: './src/index.js'
}
module.exports = {
// 这个文件要做打包，从哪一个文件开始打包
entry: {
main: './src/index.js',
sub:'./src/index.js'
},
// 打包文件要放到哪里去，就配置在output这个对象里
output: {
// 打包好的文件名字
filename: 'bundle.js',
/**
* 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径
* __dirname指的是webpack.config.js所在的当前目录的这个路径
* 下面这个结合就是一个绝对路径
*/
path: path.resolve(__dirname, 'dist')
}
}
这个时候会报错，如图。
output: {
// 打包好的文件名字
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="sub.js"></script>
<script type="text/javascript" src="http://cdn.com/main.js"></script>
<script type="text/javascript" src="http://cdn.com/sub.js"></script>
output: {
publicPath: 'http://cdn.com.cn',
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
<!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>html template</title>
</head>
<body>
<div id='root'></div>
<script type="text/javascript" src="http://cdn.com.cn/main.js"></script>
<script type="text/javascript" src="http://cdn.com.cn/sub.js"></script>
</body>
</html>
webpack中Entry与Output的基础配置的更多相关文章
- webpack学习（五）entry和output的基础配置
1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...
- 记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）
写本记时(2018-06-25)的各版本 "webpack": "^4.6.0" //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...
- Vue之webpack的entry和output
一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- webpack（11）配置文件分离为开发配置、生成配置和基础配置
前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...
- Webpack的详细配置，[Webpack中各种loader的安装配置]
在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...
- webpack的配置文件entry与output
在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果outpu ...
- webpack 多entry 配置
// webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...
随机推荐
- GraphQL介绍&使用nestjs构建GraphQL查询服务
GraphQL介绍&使用nestjs构建GraphQL查询服务(文章底部附demo地址) GraphQL一种用为你 API 而生的查询语言.出自于Facebook,GraphQL非常易懂,直接 ...
- 二、hive shell常用命令
在使用hive shell之前我们需要先安装hive,并启动hdfs 请参考:https://www.cnblogs.com/lay2017/p/9973298.html hive shell 我们先 ...
- ETL第一篇(Kettle Spoon) 初遇
ETL第一篇(Kettle Spoon) 初遇 ETL第二篇 调用webservice 简介 Kettle 是一款国外开源的 ETL 工具,纯 Java 编写,绿色无需安装,数据抽取高效稳定(数据迁移 ...
- 从Linux系统安装到Web应用启动教程
概述 本文讲述web应用服务器安装配置教程,其中包括:Linux系统安装,Mysql数据库安装配置,Redis安装配置,Tomcat安装配置,MongoDB安装配置,Linux JDK安装使用,Ngi ...
- hdu 3415 Max Sum of Max-K-sub-sequence 单调队列。
Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- CodeForces 614A（水题）
这道题有个需要注意的地方,就是范围大小 2^16 = 65535,2^32 = 65535(10^4),2^16 = 4294967295(10^9),2^64=9223372036854775807 ...
- Redis-跳跃表
相当于Redis 中的 sorted set 跳跃表节点结构: typedef struct zskiplistNode { struct zskiplistNode *backward; //后退 ...
- spss C# 二次开发 学习笔记（一）——配置数据源
由于项目的需要,使用Spss进行数据统计分析. Spss对于数据统计分析的功能有多强主要是客户关注的事情,我所主要关注的是,Spss的二次开发有多复杂. 学习的基本思路是: (1)首先了解统计基本知识 ...
- Java的文档注释之生成帮助文档
示例: /** * Title: Person类<br/> * Description:通过Person类说明Java中的文档注释<br/> * Company: *** * ...
- Angular中父子组件双向绑定传值
下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面 这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影, 子组件(橙黄色)通过Input输 ...