使用webpack编译es6代码的方法步骤


Posted in Javascript onApril 28, 2019

前言

团队使用的 webpack 功能很强大,有时候会碰到编译失败的情况,总得找工具的作者解决问题,自己很少去追究原因,感觉对于 webpack 的认知总是一知半解。因此,从本篇文章开始,自己从零开始配置 webpack,认真体验一下配置过程。文章内容过于简单,如果有 webpack 使用经验的人,就不用往下看啦。

版本说明

本文使用的 webpack 的版本为:4.30.0

开始搭建

本文的目的是使用 webpack 完成 es6 的编译,没想到过程过于简单。

安装 node 与 npm 镜像

安装 node
安装 npm 淘宝镜像

安装 webpack 与 webpack-cli

打开或者新建一个项目,使用命令行安装 webpack 与 webpack-cli:

$ cnpm install --save-dev webpack-cli

安装 es6 的编译组件

使用命令行安装 babel-loader:

$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack

创建文件目录

我创建的文件目录如下:

webpack-es6
 |- /dist
 |- index.html
 |- /src
 |- index.js

定义打包的入口与出口

项目目录下新建 webpack.config.js 文件,并按照文件目录配置打包的入口和出口:

const path = require('path');
module.exports = {
 entry: './src/index.js', // 定义入口 js ,也就是编译前的 js
 output:{
  filename:'index.js', // 定义打包输出的 js 的文件名
  path:path.resolve(__dirname,'dist') // 输出 js 的目录
 }
};

添加 js 文件的处理规则

在 webpack.config.js 文件中添加 js 文件的处理规则:

const path = require('path');
module.exports = {
 entry: './src/index.js', 
 output:{
  filename:'index.js',
  path:path.resolve(__dirname,'dist')
 },
 // 以下代码为新添加代码
 module:{
  rules:[
   {
    test: /\.js$/, // 匹配所有 js 文件
    loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
   },
  ]
 },
};

添加 npm 脚本

在 package.json 文件中添加 npm 脚本:

{
 //... 省略代码
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack" // 添加此行,使用 build 命令代替 npx 命令
 },
 //... 省略代码
 }

配置完成

以上就完成了 webpack 打包 es6 的配置,此时的文件目录如下:

webpack-es6
 |- node_modules
 |- /dist
  |- index.html
 |- /src
  |- index.js
 |- package.json
 |- package-lock.json
 |- webpack.config.js

添加代码

接下来我们添加代码测试配置是否成功。

文件 ./src/index.js 添加代码:

class Class{
 constructor() {
 this.str = 'success';
 }
 appendToBody(){
 const p = document.createElement('p');
 p.innerHTML = this.str;
 document.body.appendChild(p);
 }
}
const obj = new Class();
obj.appendToBody();

文件 ./dist/index.html 添加代码:

</html>
<body></body>
<script src="./index.js"></script>
</html>

编译程序

运行命令行

$ npm run build

打开 index.html ,如果页面中有 success ,则说明 es6 编译完成。

总结

没想到 webpack 编译 es6 配置如此简单,下一步使用 webpack 编译 postcss 。

参考链接

webpack 中文网:www.webpackjs.com/

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

Javascript 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 #Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 #Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 #Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 #Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 #Javascript
详解小程序退出页面时清除定时器
Apr 28 #Javascript
详解在Javascript中进行面向切面编程
Apr 28 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
前端微信支付js代码
2016/07/25 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python 画函数曲线示例
2019/12/04 Python
python序列类型种类详解
2020/02/26 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
树莓派升级python的具体步骤
2020/07/05 Python
django跳转页面传参的实现
2020/09/17 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
广告学专业推荐信范文
2013/11/23 职场文书
财务主管的岗位职责
2013/12/30 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
科技活动周标语
2014/10/08 职场文书
欠款起诉书范文
2015/05/19 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
你需要掌握的20个Python常用技巧
2022/02/28 Python