entry顾名思义，就是打包的入口文件
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'

}
打包生成的文件，默认的名字叫main。打包生成的文件叫做bundle.js，如果我把这个自定义的打包好的名字去掉。那么打包生成的名字是什么，是main.js。所以这个名字，就是打包生成的名字。
现在我有一个需求，我希望，这个index.js，反复生成两次，第一个文件叫做main，第二个文件叫做sub。打包生成的名字还是叫bundle
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')

　　}

}

这个时候会报错，如图。

为什么呢？现在要用index.js生成两个文件，一个叫做main,一个叫sub，但是这两个文件最终都会被取名叫做bundle.js。这样取名就重复了。就冲突了，想要解决这个问题，我们把filename替换成一个占位符
output: {

　　// 打包好的文件名字

　　filename: '[name].js',

　　path: path.resolve(__dirname, 'dist')

}
这个就是打包相应的名字
但是一般我们做好的项目都会上传到线上，域名下到文件，这个时候自动生成的index.html里面的js路径不是我想要到，我想要在路径前面加上域名
<script type="text/javascript" src="main.js"></script>

<script type="text/javascript" src="sub.js"></script>
这个自动插入的js想变成这样
<script type="text/javascript" src="http://cdn.com/main.js"></script>

<script type="text/javascript" src="http://cdn.com/sub.js"></script>
我们可以在webpack里面配置一个内容
output: {

　　publicPath: 'http://cdn.com.cn',

　　filename: '[name].js',

　　path: path.resolve(__dirname, 'dist')

}
再去运行 npm run bundle。生成index.html

<!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的基础配置的更多相关文章

  1. webpack学习（五）entry和output的基础配置

    1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...

  2. 记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  3. Vue之webpack的entry和output

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  5. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  6. webpack（11）配置文件分离为开发配置、生成配置和基础配置

    前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...

  7. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  8. webpack的配置文件entry与output

    在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果outpu ...

  9. webpack 多entry 配置

    // webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...

随机推荐

  1. 使用 csc.exe 编译C#代码

    csc.exe是C#的编译器,可以将C#代码编译为IL中间语言代码(exe.dll),然后再通过.net framework中的clr内的JIT(即时编译器)将中间语言代码编译为机器语言,然后再由机器 ...

  2. spring-security 开启注解权限控制为什么没有效果

    如果配置在spring-security中没有权限控制效果,可以配置在springmvc中试试 <security:global-method-security pre-post-annotat ...

  3. 【说文解字】Unix与Linux

    历史 Unix操作系统是由Ken Thompson和Dennis Ritchie于1969-1970年发明. 它的部分技术来源可以追溯到Multics工程,后者因为过于庞大复杂而失败. 研究人员吸取教 ...

  4. USACO06DEC Milk Patterns——Solution

    题目描述 Farmer John has noticed that the quality of milk given by his cows varies from day to day. On f ...

  5. JavaWeb学习总结（九）：Cookie进行会话管理

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  6. 关于beginPath()和closePath()的关系>>canvas的beginPath和closePath分析总结，包括多段弧的情况

    今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了. 原文请看:canvas的beginPath和closePath分析总 ...

  7. react父子组件各自生命周期函数加载的先后顺序

    理解记忆总结: 父组件即将挂载(最外层的父组件都还没准备进入,其内部的子组件当然更没进入了) -> 子组件即将挂载  -> 子组件挂载完成(父内部都没完成,父当然不能算完成)  -> ...

  8. 关于webpack 配置文件找不到

    运行命令  npm run eject 将配置文件解压出来 如果运行这个命令有错的时候,很可能与 git 有关 这时候,打开项目文件夹,显示所有隐藏的文件夹(工具),如果显示了git 的文件夹  删掉 ...

  9. 如何验证一份HTML文档的格式是否正确

    在浏览器中打开 Markup Validation Service . 点击或者激活 Validate by Direct Input 栏. 将整个示范文档的代码(不仅仅是body部分)复制粘贴到在M ...

  10. 基于 Web 的 Go 语言 IDE - Wide 1.5.1 发布！

    Wide 是一个基于 Web 的 Go 语言 IDE, 其目标不是彻底代替本地 IDE,而是做本地 IDE 很难做到的事情: 分享代码:类似 playground,但支持多文件并提供嵌入方式,在其他网 ...