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. Jquery Ajax 复杂json对象提交到WebService

    在ajax的已不请求中,常常返回json对象.可以利用json.net给我们提供的api达到快速开发. 例子: using System;using System.Collections;using ...

  2. 【转】 面向对象（OO）程序设计

    前言 本文主要介绍面向对象(OO)程序设计,以维基百科的解释: 面向对象程序设计(英语:Object-oriented programming,缩写:OOP),指一种程序设计范型,同时也是一种程序开发 ...

  3. Asp.Net 之字符串和集合的使用

    一:object:所有类的基类,所有类都直接或者间接继承自object 二:string 字符串的定义:string str=””    string str=new string(new char[ ...

  4. 九、双端队列LinkedBlockDeque

    一.简介 JDK通过BlockQueue阻塞队列实现了生产者-消费者模式,生产者向队列添加数据,消费者从队列里面消费数据. 但是在有些场景里面,我们是无法区分生产者消费者的,或者说既是生产者,也是消费 ...

  5. 10、List、Set

    List接口 List接口的特点 *A:List接口的特点: a:它是一个元素存取有序的集合. 例如,存元素的顺序是11.22.33.那么集合中,元素的存储就是按照11.22.33的顺序完成的). b ...

  6. JS 监听键盘按键

    1. 实现Ctrl+ Enter 组合键触发事件 document.onkeydown=function(event){ var keyNum = window.event ? event.keyCo ...

  7. MySQL安装再折腾--编码的设置

    一.MySQL的安装 从官网(https://dev.mysql.com/downloads/mysql/)中下载Mac OS X 10.12 (x86, 64-bit), DMG Archive(m ...

  8. 解决Fiddler无法捕获本地HttpWebRequest（C#.net）请求和HttpURLConnection（Java）请求

    方法很简单,就是设置本地代理 C# HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url); req.Proxy = new WebPr ...

  9. C#学习笔记（基础知识回顾）之枚举

    一:枚举的含义 枚举是用户定义的整数类型.在声明一个枚举时,要指定该枚举的示例可以包含的一组可接受的值.还可以给值指定易于记忆的名称.个人理解就是为一组整数值赋予意义. 二:枚举的优势 2.1:枚举可 ...

  10. 百度翻译cs文件英文注释

    原由:本人英语烂,没办法看不懂国外的代码注释!只能借助其他手段来助我一臂之力了. 虽然翻译内容不是很准确,但好过什么都看不懂的强. 对吧?! 代码有点乱有用的园友自个整理一下吧! 最近没时间所以翻译后 ...