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 ...
随机推荐
- js弹出遮层
<script> var docEle = function () { return document.getElementById(arguments[0]) || false; } f ...
- 打印插件--PAZU
PAZU对打印控制实现了: 2.1 设置页眉页脚 2.2 指定纸张大小 2.3 设置纸张方向 2.4 设置页边距 2.5 选择指定的打印机 2.6 无需用户确认,JS直接调用打印预览 2.7 无需用户 ...
- Spring 学习（四）--- AOP
问题 : AOP 解决的问题是什么 Spring AOP 的底层实现是什么 Spring AOP 和 AspectJ 的区别是什么 概述 在软件业,AOP为Aspect Oriented Progra ...
- 面向对象（基础oop）之进入继承
大家好,我叫李京阳,,很高兴认识大家,之所以我想开一个自己的博客,就是来把自己所了解的知识点通过自己的话写一下,希望被博客园的朋友们点评和一起讨论一下,也希望从博客园中多认识一些软件开发人员!现在我开 ...
- tensorboard实现tensorflow可视化
1.工程目录 2.data.input_data.py的导入 在tensorflow更新之后可以进行直接的input_data的导入 # from tensorflow.examples.tutori ...
- BZOJ1021 [SHOI2008]循环的债务
Description Alice.Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题. 不过,鉴别钞票的真伪是一件很麻烦的事情,于是他们决定要在清还债务 ...
- Vijos / 题库 / 输油管道问题
背景 想念car的GF,car就出了道水题! 描述 某石油公司计划建造一条由东向西的主输油管道.该管道要穿过一个有n 口油井的油田.从每口油井都要有一条输油管道沿最短路经(或南或北)与主管道相连.如果 ...
- JS算法之A*（A星）寻路算法
今天写一个连连看的游戏的时候,接触到了一些寻路算法,我就大概讲讲其中的A*算法. 这个是我学习后的一点个人理解,有错误欢迎各位看官指正. 寻路模式主要有三种:广度游戏搜索.深度优先搜索和启发式搜索. ...
- Oracle 通过出生日期计算年龄
方法一: SELECT TRUNC(months_between(sysdate, birth)/12) AS age from mytable 方法二: select TRUNC((to_char( ...
- 纯C语言跑分（详细注释）
#include <stdio.h> #include <time.h>//clock()所属头文件 ;//快排的数据规模 ,N=;//整点.浮点运算的规模 ;//计算圆周率的 ...