webpack打包（一）
1.安装webpack打包工具
webpack是使用npm安装
npm install webpack -g //全局安装
在命令行中就可以使用webpack这个命令了。
提示：由于npm安装会去找国外镜像，所以安装国内淘宝cnpm镜像
npm install cnpm -g
以后所有的npm操作都用cnpm命令代替就行！
注：webpack采用的是commonJs规范
使用webpack（一）
calc.js
function add(x, y) {
return x + y;
}
module.exports = {
addFun: add
};
main.js
var addExport = require('./calc.js');
console.log(addExport.addFun(1, 2));
使用webpack命令打包
webpack main.js build.js //这样就生成了build.js，就可以在html中使用script引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./build.js"></script> </body>
</html>
完成命令行中的打包！
2用webpack.config.js配置文件
如果只使用命令行，肯定每次都敲很多参数，这样不利于开发，所以如果将这些依赖写入一个配置文件中，每次都使用一个webpack命令就行
webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: './build.js'
}
};
在命令中就只要敲webpack这个命令就能自动生成build.js文件
webpack打包（一）的更多相关文章
- 使用webpack打包ThinkPHP的资源文件
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...
- 【原】使用webpack打包的后，公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- webpack打包avalon
webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...
- 基于ES6模块标准通过webpack打包HTM5项目
本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...
- webpack 打包成功，但是css不起作用
问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...
- 14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...
- webpack学习--创建一个webpack打包流程
创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...
- Webpack 打包之体积优化
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- webpack打包体积优化
优化: 1:外部引入模块(cdn) 如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...
随机推荐
- 微服务实践之路--RPC
微服务实践之路--RPC 重点来了,本文全面阐述一下我们的RPC是怎么实现并如何使用的,跟Kubernetes和Openstack怎么结合. 在选型一文中说到我们选定的RPC框架是Apache Thr ...
- HDU 1618 Oulipo KMP解决问题的方法
鉴于两个字符串,寻找一个字符串的频率,另一个字符串出现. 原版的kmp另一个陷阱.以下凝视了,标不是踩着好,有加班一定几率,也有机会错误,根据不同的字符串可以是详细. 变化看起来像一个,kmp速度是非 ...
- Visual C# 2010 实现资源管理器
演练:使用设计器创建带有 ListView 和 TreeView 控件的资源管理器样式的界面 Visual Studio 2010 其他版本 此主题尚未评级 - 评价此主题 Vis ...
- sigsuspend sigprocmask函数的用法
一个进程的信号屏蔽字规定了当前堵塞而不能递送给该进程的信号集.调用函数sigprocmask能够检測或更改其信号屏蔽字,或者在一个步骤中同一时候运行这两个操作. #include <signal ...
- wpf 实现实时毛玻璃（live blur）效果
原文:wpf 实现实时毛玻璃(live blur)效果 I2OS7发布后,就被它的时实模糊吸引了,就想着能不能将这个效果引入到我们的产品上.拿来当mask肯定会很爽,其实在之前也做过类似的,但是不是实 ...
- WPF实用指南二：移除窗体的图标
原文:WPF实用指南二:移除窗体的图标 WPF没有提供任何功能来移除窗体上的icon图标.一般的做法是设置一个空白的图标,如下图1: 这种做法在窗体边框与标题之间仍然会保留一片空白. 比较好的做法是使 ...
- 搜索服务器Elasticsearch
基本 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Ap ...
- linux 修改 ssh 的端口号，启动hg服务
修改 ssh 的端口号 # vim /etc/ssh/sshd_config 将其中的 Port 改为 想要修改的端口号. # service sshd restart 启动hg服务 # hg ...
- swift4.0 Http 请求
// // HttpHelper.swift // NavigateDemo // // Created by yixin ran on 07/08/2017. // Copyright © 2017 ...
- Fabric-Crashlytics-Android 注意点
Fabric-Crashlytics-Android 注意点 非发布版本关闭Fabirc 官方文档中有这方面的介绍,有助于在开发过程中,提高编译速度和避免上报不必要的Crash 链接 一共两步 第一步 ...