1.安装webpack打包工具

webpack是使用npm安装

npm install webpack -g　　//全局安装

在命令行中就可以使用webpack这个命令了。

提示：由于npm安装会去找国外镜像，所以安装国内淘宝cnpm镜像

npm install cnpm -g

以后所有的npm操作都用cnpm命令代替就行！

注：webpack采用的是commonJs规范

使用webpack（一）

calc.js

  1. function add(x, y) {
  2.     return x + y;
  3. }
  4.  
  5. module.exports = {
  6.     addFun: add
  7. };

main.js

  1. var addExport = require('./calc.js');
  2.  
  3. console.log(addExport.addFun(1, 2));

使用webpack命令打包

webpack main.js build.js　　//这样就生成了build.js，就可以在html中使用script引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script src="./build.js"></script>
  11.  
  12. </body>
  13. </html>

完成命令行中的打包！

2用webpack.config.js配置文件

如果只使用命令行，肯定每次都敲很多参数，这样不利于开发，所以如果将这些依赖写入一个配置文件中，每次都使用一个webpack命令就行

webpack.config.js

  1. module.exports = {
  2.     entry: './main.js',
  3.     output: {
  4.         filename: './build.js'
  5.     }
  6. };

在命令中就只要敲webpack这个命令就能自动生成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. OpenGL（十） 截屏并保存BMP文件

    BMP文件格式 BMP图像又称为Bitmap(位图),是Windows系统中广泛采用的图像格式.BMP文件的数据按照从文件头开始的先后顺序分为四个部分: 我们一般见到的图像以24位图像为主,即R.G. ...

  2. sql count(1)不要和查询数据混用 非常耗时

    count(1)不要和查询数据混用 非常耗时 例子: SELECT w.[PKID], COUNT(1) OVER() AS TotalCount FROM w WITH(NOLOCK) INNER ...

  3. window 10 64bit Tortoise SVN 图标状态显示不正常

    https://www.cnblogs.com/lzpong/p/6187366.html 根据以上帖子处理 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows ...

  4. Android零基础入门第1节：Android的前世今生

    原文:Android零基础入门第1节:Android的前世今生 现在网上有很多各色Android资料了,但相对来说还是比较零散,Android覆盖的范围极广,最近刚好有机会全部拉通整理一遍,也保存起来 ...

  5. docker启动命令,docker重启命令,docker关闭命令

    启动        systemctl start docker 守护进程重启   sudo systemctl daemon-reload 重启docker服务   systemctl restar ...

  6. Caliburn.Micro 自定义View和ViewModel的匹配规则

    使用TypeMappingConfiguration类 //Override the default subnamespaces var config = new TypeMappingConfigu ...

  7. C#WebBroswer控件的使用

    在WebBroswer中可以嵌入一个网页文件,通过Url属性绑定. URI,统一资源标识符,用来唯一的标识一个资源. URL,统一资源定位器,它是一种具体的URI,即URL可以用来标识一个资源. 它包 ...

  8. MVC4使用SignalR出现$.connection is undefined错误备忘

    SignalR使用过程中一定要注意js的引用顺序,否则就会出现$.connection is undefined脚本错误.

  9. 流程图浅析MFC架构

    http://blog.csdn.net/qq2399431200/article/details/9035315

  10. ASP.NET Web API Controller 是怎么建成的

    先看ASP.NET Web API 讯息管线: 註:为了避免图片太大以至于超过版面,上图中的「HTTP 讯息处理程序」区块省略了 HttpRoutingDispatcher 处理路由分派的部分.「控制 ...