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


Posted in Javascript onSeptember 25, 2018

搭建基于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就可以开启开发环境

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json简单介绍
Jun 10 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 #Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 #Javascript
vue移动端弹框组件的实例
Sep 25 #Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 #Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 #Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 #Javascript
You might like
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python 实现音频叠加的示例
2020/10/29 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
客户代表实习人员自我鉴定
2013/09/27 职场文书
客户经理岗位职责
2013/12/08 职场文书
合作协议书范本
2014/10/25 职场文书
小学生成绩单评语
2014/12/31 职场文书
英语导游词
2015/02/13 职场文书
宾馆客房管理制度
2015/08/06 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
如何利用golang运用mysql数据库
2022/03/13 Golang