使用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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
linux下 C语言对 php 扩展
2008/12/14 PHP
10条php编程小技巧
2015/07/07 PHP
php写app用的框架整理
2019/09/29 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python程序文件扩展名知识点详解
2020/02/27 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
化学相关工作求职信
2013/10/02 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
数控专业应届生求职信
2013/11/27 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
新教师工作感言
2014/02/16 职场文书
仓库文员岗位职责
2014/04/06 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年保卫工作总结
2014/12/05 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python