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的更多相关文章

  1. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

  2. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  3. babel使用入门以及使用webpack+babel来"编译"你的JS代码

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...

  4. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  5. npm+webpack+babel+react安装

    npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...

  6. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  7. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  8. 重温 Webpack, Babel 和 React

    开始之前 在书写文章之前,我假设大家已经有了 JavaScript,Node 包管理工具,Linux 终端操作 这些基本技能,接下来,我将一步一步指引大家从头搭建一个 React 项目 最终实现的效果 ...

  9. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  10. webpack+babel+transform-runtime, IE下提示Promise未定义？

    知识要求 babel的基础知识(推荐阮一峰的babel入门教程) 充分理解babel-plugin-transform-runtime与babel-runtime的作用(推荐github项目首页) w ...

随机推荐

  1. Ryz的鬼题

    蚂蚁(ant)[题目描述]  小 R 种了一棵苹果树,这棵树上有 n 个节点(标号从 0 到 n-1),有 n-1 条树枝连接这  n 个节点,这 n 个节点相互连通.每条树枝的长度为 1.  苹果树 ...

  2. for 在项目实战中用的比较多

    for循环编程语言中的语句之一,用于循环执行.for循环是开界的,它的一般形式为: for(; <条件表达式>; ) 语句: 初始化通常是一个赋值语句, 它用来给循环控制变量赋初值: 条件 ...

  3. MySQL: Integer & String types

    Type Storage(bytes) Minimum Value Maximum Value TINYINT 1 -128/0 127/255 SMALLINT 2 -23768/0 23767/6 ...

  4. Apache Avro# 1.8.2 Specification （Avro 1.8.2规范）二

    h5 { text-indent: 0.71cm; margin-top: 0.49cm; margin-bottom: 0.51cm; direction: ltr; color: #000000; ...

  5. a：hover标签已经定义了text-decoration：none,并且生效，但是还是有下划线

    a标签在F12计算出来的样式里 text-decoration:none; 确实有被应用到.但是链接的下划线并没有被去掉... 解决办法:p:commandLink <p:commandLink ...

  6. 浅谈JavaScript的面向对象程序设计（一）

    面向对象的语言有一个标志,他们都有类的概念,通过类可以创建多个具有相同属性和方法的对象.但是JavaScript中没有类的概念,因此JavaScript与其他的面向对象语言还是有一定区别的.JavaS ...

  7. 通过 python的 __call__ 函数与元类 实现单例模式

    简单一句话,当一个类实现__call__方法时,这个类的实例就会变成可调用对象. 直接上测试代码 class ClassA: def __call__(self, *args, **kwargs): ...

  8. 使用MyBatis时接收值和返回值选择Map类型或者实体类型

    MyBatis作为现近JavaEE企业级项目开发中常用的持久层框架之一,以其简洁高效的ORM映射和高度的SQL的自由性被广大开发人员认可.Mybatis在接收系统传来的参数和返回的参数时主要可以有Ma ...

  9. vue实现星级评价效果

    希望对你们有用,已经自己试过可以的才发布出来的 效果如下: html: <template> <div class="evaStar"> <ul cl ...

  10. STM32f103x IAP远程升级小结

    最近在面试的时候遇到一个关于IAP远程程序升级的问题,由于之前所做的项目没有涉及到远程升级需求,当时一脸懵呆,不过回答的还是不错的,今天针对STM32F103系列调试了IAP的程序,这里做一下小结,如 ...