这一篇来讲解一下如何设置webpack的配置文件webpack.config.js

我们新建一个webpack-demo的项目文件夹,然后安装webpack

执行如下命令

在项目文件夹下,建一个dist文件夹来放打包后的文件,以及一个src文件夹来放我们的代码文件

再建立一个index.html文件,以及一个webpack.config文件。

文件目录结构如下:

在src/js目录下新建一个main.js文件。

然后设置webpack.config.js

基本配置:entry表示打包的入口文件。

output表示打包之后文件的输出设置。

设置好之后,我们执行webpack命令。

发现dist文件夹下生成了一个main.bound.js文件。

我们还可以在package.json文件里面添加一些webpak打包的参数:然后执行npm run webpack。可以看到打包的详细信息。

entry入口配置讲解:

entry的配置可以是一个数组数组形式会将数组的每一项打包到一个js文件中。

也可以是一个对象,是一个对象的时候会打包生成多个文件。需要结合inputput使用

在src/js目录下新建一个a.js文件,然后按照如上的设置添加一个[name]占位符,执行npm run webpack命令

生成的结果如下:单独生成了两个打包后的文件。

还有两个占位符分别为[hash]和[chunkhash],[hash]每次打包都会生成一个新的文件,chunkhash则只会生成修改过的文件。这对于打包上线的时候是很有帮助的。

这一篇关于主要讲解了webpack.config的配置项entry和output的使用。

下一篇讲解一下htmlWebpackPlugin自动化打包html文件插件的使用。

实例讲解webpack的基本使用第二篇的更多相关文章

  1. 实例讲解webpack的基本使用第一篇

    更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...

  2. 实例讲解webpack的基本使用第三篇

    这一篇来讲解一下webpack的htmlWebpackHtml插件的使用. 先来思考一个实际问题:我们现在在index.html引用的js文件是写死的.但是我们每次打包后的文件都是动态的,那么我们怎么 ...

  3. 实例讲解webpack的基本使用第四篇

    这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. ...

  4. vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  5. 第二篇 Replication:分发服务器的作用

    本篇文章是SQL Server Replication系列的第二篇,详细内容请参考原文. 分发服务器是SQL Server复制的核心组件.分发服务器控制并执行数据从一个服务器移动到另一个服务器的进程. ...

  6. spring事务传播机制实例讲解

    http://kingj.iteye.com/blog/1680350   spring事务传播机制实例讲解 博客分类:   spring java历险     天温习spring的事务处理机制,总结 ...

  7. 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. Python人工智能第二篇

    Python人工智能之路 - 第二篇 : 现成的技术   预备资料: 1.FFmpeg: 链接:https://pan.baidu.com/s/1jonSAa_TG2XuaJEy3iTmHg 密码:w ...

  9. 第二篇——Struts2的Action搜索顺序

    Struts2的Action的搜索顺序: 地址:http://localhost:8080/path1/path2/student.action     1.判断package是否存在,例如:/pat ...

随机推荐

  1. Celery基本原理探讨

    本文对Celery进行了研究,由于其实现相对比较复杂没有足够的时间和精力对各方各面的源码进行分析,因此本文根据Celery的使用方法以及实际行为分析其运行原理,并根据查阅相关代码进行了一定程度的验证. ...

  2. PHP访问连接MYSQL数据库

    1.连接数据库       使用mysql_connect()函数建立与MySQL数据库的连接 源码:$con=mysql_connect("主机名或IP","用户名&q ...

  3. java Io流中FileInputStream和BufferedInputStream的速度比较

    首先是对FileInputStream 加上 FileOutputStream 对文件拷贝的应用 我这里拷贝的是一个视频.当然,你们拷贝什么都可以,当文件越大时效果越明显 下面是对BufferedIn ...

  4. jmeter 实现登录一次,多次操作登录后的某一个功能

  5. 递归的二叉查找树Java实现

    package practice; public class TestMain { public static void main(String[] args) { int[] ao = {50,18 ...

  6. node.js的fs核心模块读写文件操作 -----由浅入深

    node.js 里fs模块 常用的功能 实现文件的读写 目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFil ...

  7. node.js 89行爬虫爬取智联招聘信息

    写在前面的话, .......写个P,直接上效果图.附上源码地址  github/lonhon ok,正文开始,先列出用到的和require的东西: node.js,这个是必须的 request,然发 ...

  8. SQL 软解析和硬解析详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt329 当客户端进程,将SQL语句通过监听器发送到Oracle时, 会触发一个 ...

  9. vim代码粘贴缩进混乱的问题[Linux]

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp76   直接在vim插入模式下粘贴: 直接粘贴,剪贴板上的每个字符都相当 ...

  10. Java学习记录:降低耦合度

    耦合度定义 耦合度(Coupling)是对模块间关联程度的度量.耦合的强弱取决与模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少. 模块间的耦合度是指模块之间的依赖关系,包括控制关系.调用 ...