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 ...
随机推荐
- 阿里巴巴Java开发规约插件使用
10月14日上午9:00 阿里巴巴于在杭州云栖大会<研发效能峰会>上,正式发布<阿里巴巴Java开发手册>扫描插件,该插件在扫描代码后,将不符合<手册>的代码按Bl ...
- 验证是否是正整数，是否是mail，是否是正确的身份证
/// <summary> /// 通用验证类 /// </summary> class DataValidate { /// <summary> /// 验证正整 ...
- MongoDB基本用法（增删改高级查询、mapreduce）
TestCase.java package com.wujintao.mongo; import java.net.UnknownHostException; import java.util.Arr ...
- mysql8.0遇到删除外键的错误
错误信息:Cannot drop index 'energy_type_id': needed in a foreign key constraint 创建device表的信息 CREATE TABL ...
- 六、curator recipes之屏障barrier
简介 curator针对分布式场景实现了分布式屏障:barrier.我们在分布式系统中可以使用barrier去阻塞进程,知道某个条件被触发.其实跟Java多线程的barrier是一样的. 例如:当两个 ...
- Go按照条件编译
Go 支持按照条件编译,具体来说它是通过 go/build包 里定义的tags和命名约定来让Go的包可以管理不同平台的代码 . 我们这里以下面这个开源项目为例,来看Go的按条件编译, 这个开源项目是把 ...
- ASP.NET MVC与ASP.NET WebForm
ASP.NET MVC是微软公司的一款WEB开发框架,整合了“模型-视图-控制器”架构的高效与整洁,是敏捷开发最现代的思想与技术.它是传统ASP.NET WebForm的一个完善的替代品. 1.当今的 ...
- JavaWeb中监听器
一.事件源:三大域! ServletContext 生命周期监听:ServletContextListener,它有两个方法,一个在创建时调用,一个在销毁时调用: void contextIniti ...
- CSS3之word-wrap英文单词溢出强制换行
语法 word-wrap: normal|break-word; 所有主流浏览器都支持 word-wrap 属性. <div style="border:1px #f00 solid; ...
- 关于修改bug的思考
作者:朱金灿 来源:http://blog.csdn.net/clever101 有软件就有bug,这意味着软件研发不仅仅是新功能开发,更要拿出相当一部分精力去修改bug.但基本很多软件开发者并 ...