实例讲解webpack的基本使用第二篇

这一篇来讲解一下如何设置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。可以看到打包的详细信息。

时间: 2024-08-05 03:56:21

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

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

这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. 先建立一个components文件夹来存放组件,下面新建一个layer文件夹来存放layer这个组件相关的代码. layer文件建立如下相关的文件: 然后在webpack.config.js文件添加如下配置: 建立一个app.js打包的入口文件: 在这个文件中将组件的模块都引用进来. 然后建立一个

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

这一篇来讲解一下webpack的htmlWebpackHtml插件的使用. 先来思考一个实际问题:我们现在在index.html引用的js文件是写死的.但是我们每次打包后的文件都是动态的,那么我们怎么让他们结合起来呢? 这就要借助htmlWebpackPlugin插件了. 1.先安装html-webpack-plugin插件. 执行:npm install html-webpack-plugin --save-dev. 2.在webpack.config.js文件中require这个插件模块 3

Cocos2d-x3.0游戏实例之《别救我》第二篇——创建物理世界

这篇我要给大家介绍两个知识点: 1. 创建游戏物理世界 2. 没了(小若:我噗) 害怕了?不用担心,这太简单了~! 笨木头花心贡献,啥?花心?不呢,是用心~ 转载请注明,原文地址:http://www.benmutou.com/blog/archives/804 文章来源:笨木头与游戏开发 3.0新亮点,史上最简单的物理引擎 在Cocos2d-x3.0里使用物理引擎,会很有快感,因为很多繁琐的东西它都帮我们封装好了. 那么,我要开始创建游戏的关卡场景了,大家跟紧了. 我们给关卡场景命名为Toll

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

本篇文章是SQL Server Replication系列的第二篇,详细内容请参考原文. 分发服务器是SQL Server复制的核心组件.分发服务器控制并执行数据从一个服务器移动到另一个服务器的进程.它将发布和订阅的信息存储在分发数据库.几个代理促进真实数据的移动.术语在这一系列你会看到"分发服务器","发布服务器","订阅服务器".They always refer to a SQL Server instance together with

转载:eclipse 搭建SSH项目(第二篇,有具体的项目例子)

原文地址:http://blog.csdn.net/yeohcooller/article/details/9316923 读博文前应该注意: 本文提纲:本文通过一个用户注册的实例讲解SSH的整合.创建Struts项目,整合Hibernate,整合Spring.最后总结如何熟练创建SSH项目. 仅是创建SSH项目,对于其他的扩展例如Struts的国际化,Hibernate的缓存优化,Spring的AOP等,本博文涉及不到.想学习更多的东西请搜索其他博文. 本项目的环境:Windows 8-64位

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

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 数据库连接字符串 上一篇文章中,我们使用MVC的

js定时器的使用(实例讲解)

js定时器的使用(实例讲解) 作者: 字体:[增加 减小] 类型:转载 时间:2014-01-06我要评论 本篇文章主要介绍了js中定时器的使用方法.需要的朋友可以过来参考下,希望对大家有所帮助 在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定时器:timename=setInterval("function();",delaytime

Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager

多线程之间的通信实例讲解

                 多线程之间的通信实例讲解对于线程来说,说白了,就是一个函数,如果大家对于这章函数都有理解,那我对于操作系统,线程和进程间的通信会有一个新的认识!接下来我会对每一行代码进行注释,在此过程中,大家也可以对c语言有一个崭新的认识. 第一个函数,创建两个线程. #include <stdio.h>#include <pthread.h>    这个头函数要包含,因为我们后续用的函数都是系统调用,因此需要申请头函数   这样在编译的时候,就可以找到此函数的源