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

网络编程 2024/12/31 佚名

3 1 2

前言

团队使用的 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="/UploadFiles/2021-04-02/index.js">

编译程序

运行命令行

$ npm run build

打开 index.html ，如果页面中有 success ，则说明 es6 编译完成。

总结

没想到 webpack 编译 es6 配置如此简单，下一步使用 webpack 编译 postcss 。

参考链接

webpack 中文网：www.webpackjs.com/

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

webpack编译es6代码,webpack编译es6

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“使用webpack编译es6代码的方法步骤”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

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

Vue 中文本内容超出规定行数后展开收起的处理的实现方法

使用异步组件优化Vue应用程序的性能

评论“使用webpack编译es6代码的方法步骤”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接