webpack + babel
webpack设计思想：不区分.png .css .js 等文件，都视为一个模块。通过require导入，loader加载器编译之后打包在一个主js文件里。
优势：减少http请求。
1. webpack的初级配置
新建项目：F:/wepback
全局node安装webpack ：cnpm install webpack -g
项目node安装webpack : f: ==>cd webpack ==> cnpm install webpack --save-dev
新建webpack.config.js文件
项目结构：
//main.js
let one = 'Hello Word!';
document.write(`<h1>${one}</h1>`); //firth.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
//webpack.config.js module.exports ={
entry:'./main.js',
output:{
filename:'./bundle.js' // bundle.js打包后的文件名，默认为同级目录下。
}
}
node命令行： webpack
2.配置基本配置：
在需要打包的主文件里，即entry的入口文件内可以通过require导入各种模块，包括css文件等。
初始化package.json 文件 ： cnpm init
安装babel：用到es6才安装 cnpm install --save-dev babel-loader babel-core cnpm install --save-dev babel-preset-latest cnpm install --save-dev babel-polyfill
var webpack = require("webpack");
var path = require("path");
module.exports ={
entry:{
admin:'./admin/index.js', //入口文件最开始地方添加：require("babel-polyfill"); 用到es6才需要添加
consumer:'./consumer/index.js'
},
plugins:[
new webpack.optimize.UglifyJsPlugin() //打包插件，此插件为压缩代码
],
output:{
path:path.join(__dirname,'dist'), //path ：__dirname为文件名，在dist文件下生成。
filename:'[name].bundle.js' //[name]取得是entry的key值。即在dist下生成了admin.bundle.js文件和consumer.bundle.js文件。
},
module:{
loaders:[
{test:/\.js$/,loader:'babel-loader',query:{presets:['es2015']}} //es6编译成es5
]
}
}
3.热替换和自动更新。
cnpm install webpack webpack-dev-server -g
cnpm install webpack webpack-dev-server --save-dev
修改package.json 文件：
修改webpack.config.js文件 ： 只需加 publicPath:'/dist/' 这一步
node命令行：webpack
node命令行：webpack-dev-server
网页打开：http://localhost:8080/
修改文件后，浏览器会自动更新。
4.es6项目
index.js文件：
require("babel-polyfill");
require('./es6/import.js');
import {Fun} from "./es6/export";
let fun = new Fun();
fun.getName ='WANG';
let yie = fun.getName();
console.log(yie.next());
console.log(yie.next());
export.js:
class Fun {
constructor(){
this.name = [];
};
get getName(){
if(this.name.length == 0){
return '未添加姓名';
}else{
return function* (){
for(var value of this.name){
yield value;
}
return '遍历完成1';
}
}
};
set getName(name){
this.name.push(name);
};
}
export {Fun};
import.js:
import {Fun} from "./export";
class Name extends Fun{
isSuccess(){
alert('yes 继承成功1');
}
}
var name =new Name();
name.isSuccess();
webpack.config.js:
var path = require('path');
module.exports = {
entry:"./index.js",
output:{
path:path.join(__dirname,'dist'),
publicPath:'/dist/',
filename:'index.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
query:{
presets:['es2015']
}
}
]
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
webpack + babel的更多相关文章
- webpack+babel项目在IE下报Promise未定义错误引出的思考
低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- babel使用入门以及使用webpack+babel来"编译"你的JS代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- npm+webpack+babel+react安装
npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- 使用webpack+babel构建ES6语法运行环境
1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...
- 重温 Webpack, Babel 和 React
开始之前 在书写文章之前,我假设大家已经有了 JavaScript,Node 包管理工具,Linux 终端操作 这些基本技能,接下来,我将一步一步指引大家从头搭建一个 React 项目 最终实现的效果 ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- webpack+babel+transform-runtime, IE下提示Promise未定义？
知识要求 babel的基础知识(推荐阮一峰的babel入门教程) 充分理解babel-plugin-transform-runtime与babel-runtime的作用(推荐github项目首页) w ...
随机推荐
- form表单与后台请求的关系
开发中遇到一个问题,说这个问题前先看一下代码 后台方面, get请求: post请求: 前端方面: 问题是:当我点击提交表单后,页面会跳转成这样: 经过多番测试,原因竟是form表单的提交问题,如果用 ...
- [经验分享]WebApi+SwaggerUI 完美展示接口
不喜欢说废话,直接上干货. 第一步: 打开VS IDE ,新建一个WebAPI项目 选择Web .Net FrameWork (如果喜欢使用.Net Core的可以使用.Net Core) 选择Web ...
- [数据清洗]- Pandas 清洗“脏”数据（三）
预览数据 这次我们使用 Artworks.csv ,我们选取 100 行数据来完成本次内容.具体步骤: 导入 Pandas 读取 csv 数据到 DataFrame(要确保数据已经下载到指定路径) D ...
- shiro Filter--拦截器
一 shiro自带的filter:下面主要叙述顺序是 NameableFilter->OncePerRequestFilter->AdviceFilter->PathMatching ...
- HBase跨地区机房的压测小程序——从开发到打包部署（图文版）
今天做了一个跨地区机房的压测小程序,主要的思路就是基于事先准备好的rowkey文件,利用多线程模拟并发的rowkey查询,可以实现并发数的自由控制.主要是整个流程下来,遇到了点打包的坑,所以特意记录下 ...
- requireJS(版本是2.1.15)学习教程(一)
一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b. ...
- Javascipt数组
Javascipt数组 在Javascript中数组的做用是:使用单独的变量名来储存一系列的值. 数组只有一个属性,就是length,length表示的数组所占内存空间的数目. <!DOCTYP ...
- SignalR的另类实现技巧
很久之前发表过一篇名为<通过三个DEMO学会SignalR的三种实现方式>的文章,在那篇文章里面详细介绍了在WEB应用下的常用SignalR实现方法,而今天我们来利用SignalR来实现其 ...
- TurnipBit—MicroPython开发板：从积木式编程语言开始学做小小创客
编程.建模.制作动画和游戏--这些当初我们默认只有成年人玩得转的事情,现在早已经被无数小孩子给颠覆甚至玩出新境界了.热爱科技和动手的"创客"(Maker)现在在全世界都炙手可热.今 ...
- 小白的Python之路 day5 random模块和string模块详解
random模块详解 一.概述 首先我们看到这个单词是随机的意思,他在python中的主要用于一些随机数,或者需要写一些随机数的代码,下面我们就来整理他的一些用法 二.常用方法 1. random.r ...