初试webpack打包
第一次接触webpack,学习了如何用webpack打包,记录一下过程。
1.在项目根目录安装webpack
$ npm install webpack --save-dev |
2.新建一个webpack.config.js
3.根据需要安装需要的加载器,并在webpack.config.js的module中进行配置,例如加载babel。
1
|
$ npm install babel-loader --save-dev |
webpack.config.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var webpack = require( 'webpack' ); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin( 'common.js' ); module.exports = { // 页面入口文件配置 entry: { 'a' : './src/a.js' , }, // 入口文件输出配置 output: { path: './build' , filename: '[name].js' }, module: { loaders: [ { test : /\.js|jsx$/, loaders: [ 'babel' ] }, ] }, resolve:{ extensions: [ '' , '.js' , '.json' , '.scss' ] } } |
webpack简单的安装完成后,看一下项目目录
src下的a.js和b.js
a.js:
1
2
|
var b = require( "./b" ); console.log(b.add(1,2)); |
b.js:
1
2
3
|
module.exports.add= function (a,b){ return a + b; } |
因为之前webpack.config.js已经配置好,然后
1
|
$ webpack -w |
我们会发现在build下生成一个a.js,index.html中引入了这个文件,控制台中会输出3。
简单的记录,如果有误,大家可以纠正,谢谢哈
http://www.cnblogs.com/huyawei/p/5469426.html
初试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,到后来赢得宝 ...
随机推荐
- PHP针对二维数组无限遍历变形研究
一.需要变形的二维数组 $arr = Array( Array ( 'material_id' => 1, 'material_name' => '铜板纸', 'parent_id' =& ...
- SPOJ BALNUM Balanced Numbers 平衡数(数位DP,状压)
题意: 平衡树定义为“一个整数的某个数位若是奇数,则该奇数必定出现偶数次:偶数位则必须出现奇数次”,比如 222,数位为偶数2,共出现3次,是奇数次,所以合法.给一个区间[L,R],问有多少个平衡数? ...
- CF 55D Beautiful numbers (数位DP)
题意: 如果一个正整数能被其所有位上的数字整除,则称其为Beautiful number,问区间[L,R]共有多少个Beautiful number?(1<=L<=R<=9*1018 ...
- 洛谷 P3119 [USACO15JAN]草鉴定Grass Cownoisseur
屠龙宝刀点击就送 Tarjan缩点+拓扑排序 以后缩点后建图看n范围用vector ,或者直接用map+vector 结构体里数据要清空 代码: #include <cstring> #i ...
- 让您的 VS 2012/2013 升级开发 .NET 4.6 -- Targeting the .NET Framework 4.6 (多目标包)
原文出处:让您的 VS 2012/2013 升级开发 .NET 4.6 -- Targeting the .NET Framework 4.6 (多目标包) http://www.dotblogs.c ...
- JS中作用域和变量提升(hoisting)的深入理解
作用域(Scoping) javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部 ...
- EF6.0注意事项
EF6 1.必须要添加Entitiframework 2.必须要添加必须要添加Entitiframework.Sqlserver 3.单元测试一定要有配置文件里面一定要有连接字符串和初始化配置文件节点 ...
- NHibernate使用之详细图解
本文档适合初级开发者或者是第一次接触NHibernate框架的朋友,其中NHibernate不是最新的版本,但是一个比较经典的版本 NHibernate 2.1.2,其中用红线标注的部分一定要仔细看, ...
- linux命令行调试邮件服务器
linux命令行调试邮件服务器 1. Linux客户端调试邮件过程 [root@mxtest ~]# telnet mail.xx.com 25 Trying 172.16.236.103... Co ...
- iOS 设置随意屏幕旋转
方法一,通过控制器继承或分类实现: 在UITabBarController 的子类或分类中实现 - (BOOL)shouldAutorotate { return [self.selectedView ...