(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. 自制Console线（已测试CISCO3560可用）

    D9的顺序是5口在上,4口在下.从右到左分别是1-5,6-9. 5 4 3 2 1 o o o o o o o o o 9 8 7 6 用万用表量出D9的口的对应颜色.然后按照下面的表.把颜色填写上. ...

  2. php socket

    socket demo代码如下 : server: server.php <?php //phpinfo(); //确保在连接客户端时不会超时 set_time_limit(0); $ip = ...

  3. 天猫浏览型应用的CDN静态化架构演变

    原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...

  4. 分享一个Mongodb PHP封装类

    <?php /** * Mongodb 基本操作API,支持基本类似关系统型数据库的操作接口 * * @version 1.0 * [说明] * * 1:该版本API实现了 Mongodb 中最 ...

  5. Apache Tomcat关于shtml和SSI技术

    Tomcat http://blog.csdn.net/leftfist/article/details/8520773 http://webdevelop.jzxue.com/shtml/ http ...

  6. ubuntu使用

    1主机名修改 在Ubuntu系统中永久修改主机名也比较简单.主机名存放在/etc/hostname文件中,修改主机名时,编辑hostname文件,在文件中输入新的主机名并保存该文件即可.

  7. 初识js中的闭包

    今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...

  8. Git--用git建立code库

    利用点时间,把自己这段时间使用git的工具的内容,使用过程中遇到的问题都梳理下.首先我们建立一个文件库(基于Ubuntu系统): 1.必须要安装: [html]  view plain copy   ...

  9. 显示SQL Server分配的全部内存

    1.在sqlserver 中建立查询 2.执行 DBCC MEMORYSTATUS 在Windows Server 2000/2003任务管理器中,“内存使用”这个字段是显示工作区分配的内存.一个进程 ...

  10. 网络通信分享（一）:数字签名，数字证书，https通信，数据加密

    加密算法: 一:对称加密算法 在对称加密算法中,加密使用的密钥和解密使用的密钥是相同的.也就是说,加密和解密都是使用的同一个密钥.因此对称加密算法要保证安全性的话,密钥要做好保密,只能让使用的人知道, ...