[js高手之路]深入浅出webpack教程系列索引目录：

  • [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
  • [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
  • [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
  • [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
  • [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
  • [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
  • [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
  • [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
  • [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

本文继续接着上文，继续写下webpack.config.js的其他配置用法.

一、把两个文件打包成一个，entry怎么配置?

在上文中的webpack.dev.config.js中，用数组配置entry

webpack.dev.config.js文件代码：

1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
2 module.exports = {
3     entry : ['./src/js/main.js', './src/js/calc.js'],
4     output : {
5         //__dirname，就是当前webpack.config.js文件所在的绝对路径
6         path : __dirname + '/dist', //输出路径，要用绝对路径
7         filename : 'index.bundle.js' //打包之后输出的文件名
8     }
9 };

然后在src/js目录下面新建一个calc.js文件，代码如下：

1 function add( n1, n2 ){
2     return n1 + n2;
3 }
4 alert( add( 10, 20 ) );

之前的main.js文件的代码：

1 function say(){
2     alert( 'ghostwu告诉你怎么学习webpack' );
3 }
4 say();

然后命令行下，执行npm run d执行打包命令，刷新index.html文件，就能看到两个结果了

二、把两个文件分别打包成2个文件，entry采用字面量(json)方式配置

 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是当前webpack.config.js文件所在的绝对路径
 9         path : __dirname + '/dist', //输出路径，要用绝对路径
10         filename : '[name].bundle.js' //打包之后输出的文件名
11     }
12 };

filename中的[name]是计算属性，这里的name就是main和calc，执行npm run d打包命令之后,就会在dist目录下生成两个文件calc.bundle.js, main.bundle.js， 但是这两个文件并没有被引入到index.html文件，我们的index.html文件引入的还是index.bundle.js文件，我们后面会用插件解决

三、filename可以用别的计算属性

官网配置参考：https://webpack.js.org/configuration/output/#output-filename

filename支持4种动态起名字的方式( id, name, hash, chunkhash )

 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是当前webpack.config.js文件所在的绝对路径
 9         path : __dirname + '/dist', //输出路径，要用绝对路径
10         filename : '[id].bundle.js' //打包之后输出的文件名
11     }
12 };

id就是模块的编号( 0, 1, .... )

chunkhash:

 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是当前webpack.config.js文件所在的绝对路径
 9         path : __dirname + '/dist', //输出路径，要用绝对路径
10         filename : '[chunkhash].bundle.js' //打包之后输出的文件名
11     }
12 };

[name]与[hash]组合使用

 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是当前webpack.config.js文件所在的绝对路径
 9         path : __dirname + '/dist', //输出路径，要用绝对路径
10         filename : '[name]-[hash].bundle.js' //打包之后输出的文件名
11     }
12 };

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)相关推荐

  1. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  2. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...

  3. SpringCloud学习系列之四-----配置中心(Config)使用详解

    前言 本篇主要介绍的是SpringCloud中的分布式配置中心(SpringCloud Config)的相关使用教程. SpringCloud Config Config 介绍 Spring Clou ...

  4. HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...

    canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...

  5. 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...

    arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...

  6. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  7. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  8. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  9. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

  10. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

最新文章

  1. 050_学习的CSS属性
  2. 今天，开源中国出了一条广告史上最“正直”的广告
  3. Tomcat的安装和配置及出错处理
  4. Python 中的解析命令行参数
  5. 鸿蒙系统-手机-JS FA（Feature Ability）调用Java PA（Particle Ability）
  6. json session cookie介绍和使用
  7. MapReduce之OutputFormat理解
  8. MFC1、动态创建CButton
  9. 855旗舰烂大街了，Ov俩兄弟数字系列旗舰却仍用710？
  10. mysql的半同步复制
  11. Qt5.x解决报错main.cpp:1:10: fatal error: QApplication: No such file or directory问题
  12. vue Mutation 必须是同步函数 为什么_为什么vue组件中data必须用函数表达？
  13. [渝粤教育] 西南科技大学 高速铁路线路与车站 在线考试复习资料
  14. Python基础语法详解
  15. asp.net饭店点菜管理
  16. 逆变器LCL滤波器参数设计（一）
  17. antdv 表格标题换行
  18. 数据库之Oracle笔试面试题收集（来自网络）
  19. ＜van-list＞ ＜/van-list＞列表组件的使用
  20. Java什么是面向对象和面向对象特性

热门文章

  1. 关于正则表达式中^和$
  2. iOS 指纹识别常见问题汇总
  3. jquery省市插件
  4. JS 日期工具类-基于yDate
  5. FileStream:The process cannot access the file because it is being used by another process
  6. [hdu5247]rmq+预处理
  7. ★★停止动画和停止所有动画$(selector).stop() 详解
  8. C#获取程序所在的目录
  9. 2004-7-1+ 用户控件（动态加载）
  10. QPG分布框架1.1.1