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

前言

团队使用的 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/

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

(0)

相关推荐

  • 使用webpack4编译并压缩ES6代码的方法示例

    前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很多的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大 然后其实该引擎会将自己写的代码打包在一个js文件中,所以也就只有一个js文件是没有压缩的,所以我就想到了自己使用webpack单独对这个文件进行压缩,并将ES6语法编译成ES5,做低版本浏览器的兼容. 第一步安装webpack 1) 全局安装webpack4 npm install webpack -g

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

    前言 团队使用的 webpack 功能很强大,有时候会碰到编译失败的情况,总得找工具的作者解决问题,自己很少去追究原因,感觉对于 webpack 的认知总是一知半解.因此,从本篇文章开始,自己从零开始配置 webpack,认真体验一下配置过程.文章内容过于简单,如果有 webpack 使用经验的人,就不用往下看啦. 版本说明 本文使用的 webpack 的版本为:4.30.0 开始搭建 本文的目的是使用 webpack 完成 es6 的编译,没想到过程过于简单. 安装 node 与 npm 镜像

  • Java使用lombok消除冗余代码的方法步骤

    一.项目背景 在写Java程序的时候经常会遇到如下情形: 新建了一个Class类,然后在其中设置了几个字段,最后还需要花费很多时间来建立getter和setter方法. lombok项目的产生就是为了省去我们手动创建getter和setter方法的麻烦,它能够在我们编译源码的时候自动帮我们生成getter和setter方法.即它最终能够达到的效果是:在源码中没有getter和setter方法,但是在编译生成的字节码文件中有getter和setter方法. 比如源码文件: import java.

  • QT5编译使用QFtp的方法步骤

    背景 使用 QNetworkAccessManager 可以实现 Ftp 的上传/下载功能,但它没有提供例如list.cd.remove.mkdir.rmdir.rename 等功能.这种情况下,我们可以使用QFtp,需要下载源码.编译并处理一些坑. 下载 从 GitHub 下载 QFtp: https://github.com/qt/qtftp 编译 修改 qftp/qftp.pro,删除最后一行,module_qtftp_tests.不然编译会有错误,这个是测试子项目,暂时去除,先编译使用.

  • C调用C++代码的方法步骤

    有时C程序里需要用到C++的类,但是C语言又不能直接调用类,这时需要把C++的类使用C接口封装后,再调用, 可以将封装后的C++代码编译成库文件,供C语言调用: 需要注意的是,封装的C++代码库文件是用g++编译的,所以在C中调用时,需要添加extern "C"{}关键字. 编译c代码时,要加上-lstdc++ 如下代码,是c代码使用C++的map容器的例子: //test.cpp 封装C++代码 #include <map> #include <iostream&g

  • 手动编译C#代码的方法

    刚学习c#的朋友要自己手动编译c#代码加深记忆,现在总结下如果手动编译! 1.先找到系统的.net 环境在一般在 C:\Windows\Microsoft.NET\Framework\v4.0.30319 2. 将.net环境路径设置为系统环境路径 将.net环境路径设置为系统环境路径 3.右键点击要编译的c#代码 选择 属性,把位置复制下来! 4.然后进入 cmd 黑窗口!在运行里输入 cmd 就行了! 5.进入我们要编译的代码的路径!cd 加 你代码的路径 回车,如图 6.开始编译 编译的格

  • 利用git提交代码的方法步骤

    一.首先需要下载git 查看电脑是否安装git,打开终端,输入git,回车如果输出如下,则代表已安装了git 如果未安装,则会输出: 按照提示输入:sudo apt-get install git即可安装!!或者到此处下载:git下载,pkg包下载完成,双击安装. 输入命令:git --version 可查看当前git版本 二.安装后需要一些配置 配置用户名和邮箱: $ git config --global user.name "Your Name" $ git config --g

  • 网站被黑后处理方法及删除批量恶意代码的方法步骤

    如果发现网站出现异常情况,如页面被修改.管理账号不能登录,则说明网站已经被入侵.这时就需要尽快进行处理,以防止黑客种植的网页病毒扩散. 暂时关闭网站 网站被黑客入侵后,最常见的情况就是被植入木马程序,为了保证浏览者的安全,必须先关闭网站,待处理完毕后再开放.关闭时可以暂时将域名转向其它地址,如建立一个网站的帖吧,或者放置一个说明页面. 使用备份恢复 如果网站文件被黑客破坏或删除,假如事先进行过网站数据备份的话,可以直接使用备份文件恢复.万一没有对备份进行备份,而数据又非常重要的话,建议先不要进行

  • 使用C++调用Python代码的方法步骤

    一.配置python环境问题 1.首先安装Python(版本无所谓),安装的时候选的添加python路径到环境变量中 安装之后的文件夹如下所示: 2.在VS中配置环境和库 右击项目->属性->VC++目录 1)包含目录: Python安装路径/include 2)库目录: Python安装路径/libs 右击项目->属性->连接器->输入->附加依赖库 debug下: python安装目录/libs/python37_d.lib release下: python安装目录

  • centos7编译安装nginx的方法步骤

    安装nginx编译所需的lib库 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel yum -y install pcre pcre-devel 查看pcre(正则库)版本 pcre-config --version 进入编译目录 cd /usr/local/src 从官网下载最新的nginx(stable version稳定版) wget http://nginx.org/download/ngi

随机推荐