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 ...
随机推荐
- 微信小程序随笔。笔记本忘家里了
所有ui组件都有的共有属性id.class.style.hidden.data-*.bind* / catch*.
- C# 利用log4net 把日志写入到数据库表中
效果图: 1:第一步创建SQL表结构 CREATE TABLE [dbo].[LogDetails] ( [LogID] int NOT NULL IDENTITY(1,1) , [LogDat ...
- 关于UI回调Invoker的实现（一）
打算写一个DirectUI库,在写其中底层窗口的回调构造的时候遇到一个问题. Invoker是一个模板,因为closure的关系,它必须保存一个类对象的指针,和回调函数的地址.而函数调用的时候,就可以 ...
- C# 之文件拖拽和pixturBox缩放与拖拽
文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...
- Java 运行时数据区域
1. 整体分类 程序计数器 虚拟机栈 本地方法栈 Java 堆 方法区 运行时常量池 直接内存 2. 程序计数器 每个线程一个计数器,线程的私有内存 指向的是字节码的内存地址? 如果线程执行的是 Ja ...
- hdu 2412 Party at Hali-Bula 经典树形DP
Party at Hali-Bula Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 11、springboot之包扫描
如上图,将Application启动类放入hello.aaa文件夹下面 启动springboot,访问http://localhost:9999/testJson,报404错误,在启动类上面加上@Co ...
- vs2015 xamarin 添加智能感知
下载 由于未安装 Xamarin Studio, 不存在android-layout-xml.xsd . schemas.android.com.apk.res.android.xsd 文件. 所以在 ...
- python学习之老男孩python全栈第九期_day020知识点总结——序列化模块、模块的导入和使用
一. 序列化模块 # 序列化 --> 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化# 反序列化 --> 从字符串转换成数据类型的过程叫做反序列化# 序列 -- 字符串 # 什 ...
- ionic--配置路由
1.ng-route index中引用文件: <script src="ionic.bundle.js"></script> <script src= ...