详解搭建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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
解决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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python中django学习心得
2017/12/06 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
经典而简洁的婚礼主持词
2014/03/13 职场文书
成绩单公证书
2014/04/10 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
创文明城市标语
2014/06/16 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
python基础之函数的定义和调用
2021/10/24 Python