使用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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
使用Ajax实现进度条的绘制
Apr 07 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中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python实现名片管理系统
2018/11/29 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
简单了解django orm中介模型
2019/07/30 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
酒后驾驶检讨书
2014/01/27 职场文书
银行批评与自我批评
2014/02/10 职场文书
精彩广告词大全
2014/03/19 职场文书
服务之星事迹材料
2014/05/03 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
小学生教师节广播稿
2015/08/19 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书