使用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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
小程序实现投票进度条
Nov 20 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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 中文和编码判断代码
2010/05/16 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
jupyter notebook实现显示行号
2020/04/13 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
简单叙述一下MYSQL的优化
2016/05/09 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
大学生自我鉴定
2013/12/16 职场文书
矫正人员思想汇报
2014/01/08 职场文书
阿德的梦教学反思
2014/02/06 职场文书
公司新年寄语
2014/04/04 职场文书
给校长的建议书600字
2014/05/15 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
初中数学教学反思范文
2016/02/17 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
python 通过使用Yolact训练数据集
2021/04/06 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL