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. C#单元测试：NUnit详细使用方法

    1. TDD的简介 首先什么是TDD呢?Kent Beck在他的<<测试驱动开发 >>(Addison-Wesley Professional,2003)一书中,使用下面2个原 ...

  2. C# 视频转换类

    using System.Web; using System.Configuration; namespace DotNet.Utilities { public class VideoConvert ...

  3. C# 之VS程序打包

    VS2012没有自带打包工具,所以要先下载并安装一个打包工具.我采用微软提供的打包工具:  InstallShield2015LimitedEdition.下载地址:http://pan.baidu. ...

  4. Mongodb操作之查询（循序渐进对比SQL语句）（转http://www.tuicool.com/articles/UzQj6rF）

    工具推荐:Robomongo,可自行百度寻找下载源,个人比较推荐这个工具,相比较mongoVUE则更加灵活. 集合简单查询方法 mongodb语法:db.collection.find()  //co ...

  5. hdu 1159(DP+字符串最长公共序列)

    http://blog.csdn.net/a_eagle/article/details/7213236 公共序列可以用一个二维数组dp[i][j]保存每个点时的最大数字,本质就是一个双向比较. dp ...

  6. [转]Tips——Chrome DevTools - 25 Tips and Tricks

    Chrome DevTools - 25 Tips and Tricks 原文地址:https://www.keycdn.com/blog/chrome-devtools 如何打开? 1.从浏览器菜单 ...

  7. 不得不知的npm常用指令

    前端进阶肯定会遇到npm(包管理工具)的使用,下面是我总结的一些比较实用的npm指令: npm install <name>安装nodejs的依赖包 例如npm install expre ...

  8. let 和 var 区别

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: <Javascript 严格模式详解&g ...

  9. AJAX 概念 优势 发展前景 工作原理 底层技术 状态 缺点 框架

    1. 概念 Ajax asynchronous JavaScript and XML , 异步js和xml. 这种解释已经过时了, 现在ajax就是, 允许浏览器和服务器通信, 而无需刷新当前页面的技 ...

  10. <Android 应用 之路> MPAndroidChart~ScatterChart

    简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...