Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

使用webpack配置ES6开发环境

Posted on 2017年9月24日2017年9月24日 by king2088

1、ES6简介

由于ES6无法直接运行在浏览器中,只能通过babel来进行解析转换(编译)成ES5才可以运行在浏览器中,因此我们就需要给ES6搭建相关的环境,才可以开心的写ES6。
目前很多框架都使用了ES6,比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码,让我们可以少写很多代码,当然如果你还了解typescript以及coffeescrpt,那么就更加方便你进行各种开发了。但是问题来了,这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具,简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件,将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS(安装方法请到官方查看)
2)、使用npm初始化项目
[cc lang=”javascript”]npm init ES6[/cc]
ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息,并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境,我们需要安装以下几个必须的依赖包

babel-core、babel-loader、babel-preset-es2015、html-webpack-plugin、webpack、webpack-dev-server
其中babel-core、babel-loader、babel-preset-es2015这几个依赖包主要是用于解析ES6并且转换成ES5的,html-webpack-plugin主要是用于webpack运行html,webpack、webpack-dev-server主要是用于搭建本地服务环境,其中webpack-dev-server是用于热更新的(所谓热更新就是当你修改了代码,不用再去刷新浏览器即可实时运行修改后的代码)
运行下面的命令一次性安装所有依赖包
[cc lang=”javascript”]npm install babel-core babel-loader babel-preset-es2015 html-webpack-plugin webpack webpack-dev-server –save-dev[/cc]

5、创建.babelrc文件

在根目录创建一个.babelrc文件,输入如下内容
[cc lang=”javascript”]{
“presets”: [
“es2015”
],
“plugins”: []
}[/cc]

6、创建webpack配置文件webpack.config.js文件

[cc lang=”javascript”]const path = require(‘path’);
const webpack = require(‘webpack’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: path.join(__dirname,’src’),
output: {
filename: “public/main.js” //输出目录及文件名
},
module: {
loaders: [
{ test: /\.js$/,loader: “babel-loader” }
]
},
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
}),
new webpack.HotModuleReplacementPlugin()
],
devtool:’eval-source-map’,
devServer: {
contentBase: “./public”,//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 8011//http端口
}
}[/cc]
这样我们就搭建好了webpack的环境了,下面我们需要配置下运行的scripts命令就大功告成了!
在此我们需要在根目录下创建两个文件夹,一个是src,另一个是public,在src文件夹中新建两个文件,一个是index.js一个是index.html。

7、修改package.json

在package.json中找到scripts:{},在其中添加如下代码:
[cc lang=”javascript”]”start”: “webpack”,
“server”: “webpack-dev-server –open”,
“build”: “webpack-dev-server –devtool eval –progress –colors –hot –content-base build”[/cc]
如果需要直接build出一个main.js直接运行npm run build
如果想要直接在浏览器中查看效果直接运行npm run server

8、编写一段ES6的代码看看效果

打开src目录下的index.js文件输入以下代码:
[cc lang=”javascript”]let data = {
id: 1,
name: ‘张三’,
sex: ‘女’,
addr: ‘深圳南山’
}
let { id, sex, addr} = data
document.getElementById(‘people’).innerText = `${id}, ${sex}, ${addr}`;[/cc]
在index.html中增加一个div

直接运行npm run server如果没有任何错误的话,即可看到浏览器中显示了 1, 女, 深圳南山

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme