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 ...
随机推荐
- System.Web.HttpException: 请求在此上下文中不可用
转自:https://www.cnblogs.com/wangguowen27/archive/2013/05/12/IIS_itcast_win7.html 问题:Web应用程序池配置错误造成的,这 ...
- EF fluent API如何配置主键不自动增长
在Dbcontext中作如下添加: protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilde ...
- flask中的数据操作
flask中数据访问: pip install flask-sqlalemy 创建数据: 创建app的工厂 from flask import Flask from flask_sqlalchemy ...
- 1..net mvc的原理概述
请求过来,根据ip和端口,由iis服务器进行接收,如果是静态文件则直接返回文件内容,如果无法解析,则根据映射规则找到对应请求后缀 的ASPNET_ISAPI.dll处理程序集,交由其进行处理. 1.此 ...
- axios中设置post请求，后台却无法识别参数
场景:在使用iview时,定义api请求时,代码如下 export const delWord = (data) => { return axios.request({ url: '/words ...
- 如何用Fireworks制作经典的扫光字GIF动画
1.首先我们把背景选为黑色.再输入文字用白色填充,注意调整文字之间的间隔. 2.选中字体,对其进行转换为路径文件. 3.对间隔再做少许调整. 4.复制文字改为黑色,做平移,出现立体效果. 5.再复制一 ...
- AngularJS开发人员最常犯的10个错误
简介AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客户 ...
- Fragment 重叠 遮盖问题
1.导致Fragment 重叠 和遮盖的原因 主要还是因为Fragment的状态保存机制,当系统内存不足时,Fragment的主Activity被回收,Fragment的实例并没有随之被回收. Act ...
- 解决linux下fflush(stdin)无效
void clean_stdin(void) { int c; do { c = getchar(); } while (c != '\n' && c != EOF); }
- apply方法和call方法的详解2
1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...