(1) 首先生成一个package.json文件 进入项目文件的根目录执行npm init

在根目录中生成一个package.json文件

(2)全局安装webpack  执行npm install -g webpack

根目录的文件夹下会生成node_modules文件夹中会包含webpack，

(3)配置webpack

每个文件目录下都会有一个webpack.config.js

entry:页面中的入口文件

output: 页面通过打包后生成的目标文件放在什么地方。这里在目录的跟文件夹下创建了一个build文件夹，该文件夹内有一个build.js的文件

resolve：解析了模块路径的配置

(4)最后来执行webpack即可在根目录下生成一个build文件夹中有build.js文件

END.........................................

在页面中引入build.js即可

webpack打包的更多相关文章

  1. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  2. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  3. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  4. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

  5. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  6. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  7. 14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  8. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

  9. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  10. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

随机推荐

  1. 华为 HG8245C 光猫 修改无线用户数限制+hw_ctree.xml 文件解密

    这个操作方法是 从网上其他人提供的方法  和我一个朋友总结出来的,我只是负责整理,并实地在我自己的光猫上操作成功了 风险提示 :刷机有风险,操作需谨慎, 备份备份备份! 俺家,俺的新家是电信光纤接入, ...

  2. Ext.grid.GridPanel属性及方法等

    1.Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未 ...

  3. hbase 使用

    hbase shell命令的使用 再使用hbase 命令之前先检查一下hbase是否运行正常 hadoop@Master:/usr/hbase/bin$ jps HMaster NameNode Se ...

  4. 暴力清除Android中的短信

    有些短信程序有bug,当短信(特别是彩信)没有接收完整,或者是一些异常情况下,你会收到一条短信但是看不到或者看不了. 此时郁闷的事情就来了,系统会提醒你还有1条未读短信,但是你满世界都找不到这条短信. ...

  5. Logcat 不显示日志的另一个原因. 跟cocos2dx关系不大.

    在Android真机调试时,如果在eclipse中看不到LogCat信息,提示是: $ adb logcat info: log device is empty! 原因是系统默认关闭了log,需要将其 ...

  6. 搭建windows下filezilla FTP服务器

    FTP服务器必不可少,鉴于serv-u越来越冗余繁多的设置,个人还是比较喜欢简单.干净,满足需求即可的东东,所以选择filezilla.更主要的原因是ta是开元免费使用的,虽然免费,功能却齐全,我发现 ...

  7. MongoDB入门二：基本概念

    前言 工欲善其事必先利其器.在学习MongoDB之前,需要对MongoDB的一些基本概念有系统的了解. 所以,本篇文章主要介绍MongoDB的一些基本概念,这些概念的定义均来自<MongoDB权 ...

  8. Java 随机数

    本章先讲解Java随机数的几种产生方式,然后通过示例对其进行演示. 广义上讲,Java中的随机数的有三种产生方式:(01). 通过System.currentTimeMillis()来获取一个当前时间 ...

  9. Unity 3D 中自动寻路 和 跟随转向 探析

    这里主要讲三个函数 , 一个自动跟随函数 和 两个指向旋转函数 , 这三个函数在游戏角色创建过程中会经常用到: 这个是跟随函数 和 欧拉角旋转函数 public class GensuiZhixian ...

  10. android高级---->AsyncTask的源码分析

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask,它在子线程更新UI的例子可以参见我的博客(android基础---->子线程更新UI).今天我们通过一个小的案例 ...