详解搭建es6+devServer简单开发环境

搭建基于es6和热加载的前端简单开发环境，适合demo类小项目，这样就不用依赖browsersync等多余的东西

目录结构

  1. /src

    1. index.js
    2. index.html
  2. /dist

安装依赖

注意版本，尤其是babel，可去babel的npm地址查看，那里不会错

#bebal相关
yarn add babel-core babel-loader babel-preset-env

# webpack相关
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin

package.json

{
 "name": "design-pattern",
 "version": "1.0.0",
 "description": "js设计模式的学习深入",
 "main": "index.js",
 "author": "axin <laputacloud@163.com>",
 "license": "MIT",
 "scripts": {
  "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
 },
 "dependencies": {},
 "devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "7",
  "babel-preset-env": "^1.7.0",
  "html-webpack-plugin": "^3.2.0",
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
 }
}

webpack.dev.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: './src/index.js',
 output: {
  path: __dirname,
  filename: './dist/bundle.js'
 },

 module: {
  rules: [{
   test: /\.js?$/,
   exclude: /(node_modules)/,
   loader: 'babel-loader'
  }]
 },

 plugins: [
  new htmlWebpackPlugin({
   template: './index.html'
  })
 ],

 devServer: {
  contentBase: path.join(__dirname, './dist'),
  open: true, // 自动打开浏览器
  port: 6688, // devServer对应的端口号
 }
}

.babelrc 可根据需要配置

{
 "presets": ["env"]
}

然后就可以执行npm run dev就可以开启开发环境

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Webpack + ES6 最新环境搭建与配置

    一,准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像 二,创建目录及安装webpack创建项目 在命令行中输入 npm init -y 我们看到了项目中多了一个package.json文件,它定义了这个项目中所需各种模板及项目中的配置信息.该对象的每一个成员就是当前项目的一项设置.详细设置信息请参考 https://docs.npmjs.com/files/package.json 安装webpack 全局安装webpack,在命令行输入 npm install webp

  • 在ES5与ES6环境下处理函数默认参数的实现方法

    函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮) MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5版本中,并没有提供的直接方法供我们我们处理函数默认值 所以只能够自己去增强函数的功能,一般会这么来做: function doSomething (name, age) { name = name || 'default name' age = age || 18 console.log(name

  • 手把手教你搭建ES6的开发运行环境

    手把手教你搭建ES6的开发运行环境

    前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言. 其实当ES5还没有完全普及时,ES6就接踵而来了,在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟ES5相比,语法方面变化确实有点大,可以说新的JavaScript语法看上去有种脱胎换骨的感觉.博主也曾跃跃欲试,看了很多语法方面

  • 详解搭建es6+devServer简单开发环境

    搭建基于es6和热加载的前端简单开发环境,适合demo类小项目,这样就不用依赖browsersync等多余的东西 目录结构 /src index.js index.html /dist 安装依赖 注意版本,尤其是babel,可去babel的npm地址查看,那里不会错 #bebal相关 yarn add babel-core babel-loader babel-preset-env # webpack相关 yarn add webpack webpack-cli webpack-dev-serv

  • 详解SpringMVC和MyBatis框架开发环境搭建和简单实用

    详解SpringMVC和MyBatis框架开发环境搭建和简单实用

    1.下载SpringMVC框架架包,下载地址: 点击下载 点击打开地址如图所示,点击下载即可 然后把相关的jar复制到lib下导入 2.MyBatis(3.4.2)下载 点击下载 MyBatis中文文档地址 点击查看 下载解压之后把jar复制到lib下导入,大概是这样子的 3.jdbc连接库还没有下载...这个是5.1.41版本的... 点击下载 解压之后这样子... 4.fastjson 阿里巴巴的json解析库 点击下载 版本是1.2.24 这个是托管到了github上面的,地址是:点击进入

  • Docker搭建自己的PHP开发环境

    1. 前言 1.1 为什么要用Docker ? 是否有这样的场景,你搞了一个项目,在本地开发时需要搭建环境,放到线上时也需要搭建环境,到公司想暗戳戳玩一下要搭建环境,不搭还不行,因为你的环境依赖还挺多.这个时候如果有了Docker,只需要在机器上装个Docker,放上写好的Dockerfile,一行命令就自动完成这个事,方便又高效,岂不是很爽? 1.2 准备 接下来,本文介绍如何搭建一个PHP的开发环境,将用 zPhal-dockerfiles 做为例子,这是我为我的博客系统准备的一套Docke

  • Docker搭建前端Java的开发环境详解

    一.解决的痛点 1.免搭建后端开发环境. 2.开发环境改变只需要改变镜像就能同步更新. 3.不需要eclipse等IDE工具. 4.切换开发项目 二.解决思路 利用docker启动Ubuntu镜像,在容器中搭建好项目需要的开发环境,使用挂载卷将本地代码挂载到容器中,使用容器中的环境编译运行代码,宿主机通过 docker 暴漏出的端口访问容器中的服务,这样前端的开发机上就只需要部署docker就搞定了. 三.关于docker 了解docker 本文并不打算细讲docker的知识,相关的文章有很多,

  • 详解搭建基于C#和Appium的Android自动测试环境

    详解搭建基于C#和Appium的Android自动测试环境

    关于Appium环境搭建的例子网上比较多,不过都是关于Python,Java的,使用C#客户端的资料比较少,公司现有的测试系统是基于C#构建的,因为要和现有系统集成,所以选择的C#语言作为客户端, 下载Appium 官网提供的C#例子,但是对应的Android 版本,Nunit 版本都比较旧,对于初次接触手机测试的人来说,一步一个坑,把例子拿下来,折腾了一两天,还是各种问题.最终通过百度,Google,终于搭建好了环境,现在分享一下过程,希望对于后来人会有些帮助. 默认大家是安装了Visual

  • 详解JS ES6编码规范

    1.块级作用域 1.1.let取代var ES6 提出了两个新的声明变量的命令: let 和const.其中,let可以完全取代var,因为两者语义相同,而且let没有副作用. var命令存在变量提升的特性,而let没有这个命令. 所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读. 1.2.全局常量和线程安全 在let和const之间,优先使用const. let应出现在单线程模块代码内,而const则非常适合多线程. // bad var a = 1, b = 2,

  • VS2015 搭建Asp.net core开发环境的方法

    VS2015 搭建Asp.net core开发环境的方法

    前言 随着ASP.NET Core 1.0 rtm的发布,网上有许多相关.net core 相关文章,最近正好有时间就尝试VS2015 搭建Asp.net core开发环境,以下是简单的搭建过程,下面来一起看看吧. 步骤如下 一.首先你得装个vs2015 并且保证已经升级至 update3及以上(此处附上一个vs2015带up3的下载链接: ed2k://|file|cn_visual_studio_enterprise_2015_with_update_3_x86_x64_dvd_892329

  • 详解用Docker构建MySQL主从环境

    前言 本篇文章记录我使用 docker-compose 以及 dockerfile 来构建基于 binlog 的 MySQL 主从环境.如果你严格按照文中的步骤进行配置,相信很快就可以搭建好一个基础的 MySQL 主从环境. 介绍 MySQL 主从同步分为 3 个步骤: master 节点将数据的更新记录写到 binary log 中. slave 节点开启 IO 线程连接 master 节点,请求获取指定 binary log 文件的指定位置之后的日志. master 节点的 binary l

  • 在 Windows 下搭建高效的 django 开发环境的详细教程

    从初学 django 到现在(记得那时最新版本是 1.8,本文发布时已经发展到 3.1 了),开发环境一直都是使用从官方文档或者别的教程中学来的方式搭建的.但是在实际项目的开发中,越来越感觉之前的开发环境难以适应项目的发展.官方文档或一些教程中的环境搭建方式主要存在这些问题: python manage.py runserver 启动的开发服务器热重载非常慢,尤其是当项目中导入了大量模块时,有时候改一次代码要等几秒钟才能完成重载. 主力开发环境为 Windows + PyCharm,然而有时候依

  • 详解Go多协程并发环境下的错误处理

    引言 在Go语言中,我们通常会用到panic和recover来抛出错误和捕获错误,这一对操作在单协程环境下我们正常用就好了,并不会踩到什么坑.但是在多协程并发环境下,我们常常会碰到以下两个问题.假设我们现在有2个协程,我们叫它们协程A和B好了: 如果协程A发生了panic,协程B是否会因为协程A的panic而挂掉? 如果协程A发生了panic,协程B是否能用recover捕获到协程A的panic? 答案分别是:会.不能. 那么下面我们来一一验证,并给出在具体的业务场景下的最佳实践. 问题一 如果

随机推荐