(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. win平台，apache通过web访问svn

    上个月用php写一个在线打包lua变成luac,碰到个权限问题.pysvn无法更新.网上搜了好半天都找不到解决方法.最好还是自己解决了. 解决方法也很简单,找到aphache服务,提权限就行了.lin ...

  2. IOS的浅拷贝和深拷贝

    什么是深拷贝和浅拷贝 浅拷贝:就是指针的复制,拷贝的指针跟原指针指向内存中的同一个位置的对象.至于对象的引用计数值是否+1,就是看拷贝的指针赋给给的变量是Strong类型的,还是week类型的. 如果 ...

  3. tomcat6 使用comet衍生出的两个额外问题

    开发了一个轮询推送功能,网上也有很多文章讲这个就不说怎么做的了.现在发现两个问题: 一:就是登录进主页面后,由于浏览器在不停轮询,导致后端认为前端一直在操作,而正常设定的session超时就跳转到登录 ...

  4. iOS- 微信支付 (服务器调起支付 )以及回调不成功的原因 不看后悔

    写的不错,给留个言哈... 一. 支付准备工作 1. 微信相关准备工作 (1) 向微信官方开通支付功能. 这个不是前端的工作. (2) 导入官方下载的微信支付SDK包. 我用的是微信开放平台下载的SD ...

  5. 用vuejs写了一个酷狗的webApp

    这几天在学习vueJS,学了半个月,觉得是不是该写点什么呢?于是 .脑子一抽,仿了一个酷狗的webapp. 项目截图: 由于是单页应用,切换路由时音乐不会停止,算是一个小亮点吧. 技术栈: vuejs ...

  6. Android 学习笔记之SurfaceView的使用+如何实现视频播放...

    学习内容: 1.掌握Surface的使用... 2.Android中如何实现视频播放... 1.SurfaceView类的使用   在Android中,一般播放音频时我们可以去使用Android提供的 ...

  7. Sapi 添加语法的文章（转载）

    最近在做SAPI方面的工作,比较详细的中文资料不多,遇到各种问题,本来想着做完了项目总结一下,今天看到这篇文章,对于SAPI加载识别语法方面的描述十分详细,先转过来做个备份,谢谢原文博主:djyang ...

  8. 如何转移数据库MDF和LDF文件

    我们可以很轻易地使用SQL Server来创建一个数据库,创建的数据库实例将存储在指定的默认位置(不一定是C盘,可以手动变更默认存储位置).假设此时数据库实例创建在了C盘中的默认位置,亦即是与数据库安 ...

  9. 使用MyBatis查询int类型字段，返回NULL值时报异常的解决方法

    当配置mybatis返回int类型时 select id="getUserIdByName" parameterType="string" resultType ...

  10. RequireJS 模块化加载框架使用

    RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样,这里简单介绍其相关用法 同样的,首先是下载好 require.js --> http://requirejs. ...