这一篇来讲解一下如何设置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. Linux程序写入oralce数据库中文显示为问号??? 代码实现设置环境变量!

    Linux程序写入oralce数据库中文显示为问号??? 1.问题介绍 根本原因是字符集的问题,是数据库的字符集和写入程序的linux系统的字符集不一致导致: 但是用export NLS_LANG=& ...

  2. [2017-08-07]ABP系列——QuickStartA:概述、思想、入门和HelloWorld

    唔,说好的文章,欠了好久,先水一篇. 本系列目录:Abp介绍和经验分享-目录 概述 先表个态:对绝大多数人来说,ABP是成熟的,足以用到生产环境的. 最适合的:业务非常复杂且不追求极致性能的(这里并不 ...

  3. Android binder机制---概述

    1.进程间通讯的原因 目前操作系统都使用虚拟存储技术,管理内存. 假设是32位机器,0-3G是用户空间,3-4G是系统使用.虚拟内存和逻辑内存都按4K分页.这样虚拟内存和逻辑内存就存在对应关系. 一个 ...

  4. TC358749XBG:HDMI转MIPI CSI芯片简介

    TC358749XBG是一颗HDMI转MIPI CSI功能的视频转换芯片,分辨率:1920*1080,电源3.3/1.8/1.2,通信方式:IIC,封装形式BGA80

  5. Tornado(cookie、XSRF、用户验证)

      --------------------Cookie操作-------------------- 1.设置Cookie     1.set_cookie(name,value,domain=Non ...

  6. Android studio 安装的安装一些问题

    在国内如何更新android sdk? 由于众所周知的某些原因,我们无法直接连接android sdk的更新服务更新sdk,所以可以通过国内的ftp站点把常用的sdk组件如android platfo ...

  7. Python Counter class

    Counter class https://docs.python.org/2/library/collections.html#collections.Counter # class collect ...

  8. linq之延迟加载和即时加载+标准查询运算符

    延迟加载 Linq查询的执行结果是IEnumerable<T>类型,而对IEnumerable<T>,在内部,C#通过yield关键字实现迭代器达到延迟加载的目的.从而使Lin ...

  9. Spring集成RabbitMQ-连接和消息模板

    ConnectionFactory ConnectionFactory是RabbitMQ服务掌握连接Connection生杀大权的重要组件 有了它,就可以创建Connection(org.spring ...

  10. 算法学习:Pac-Man的简单对抗

    Pacman项目是加州大学伯克利分校提供的一个可视化的AI学习平台.其主体利用python完成.该项目提供了丰富的说明文档,以及预先实现了一些简单的算法供参考各接口的使用. http://ai.ber ...