使用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 相关文章推荐
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
Javascript实现基本运算器
Jul 15 Javascript
基于vue.js实现的分页
Mar 13 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
js数组中去除重复值的几种方法
Aug 03 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
护士岗前培训自我评鉴
2014/02/28 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
环保口号大全
2014/06/12 职场文书
学校交通安全责任书
2014/08/25 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
政风行风建设整改方案
2014/10/27 职场文书
店铺转让协议书
2015/01/29 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
同学会演讲稿
2019/04/02 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL