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

时间：2021-05-25

前言

团队使用的 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 中文网：/

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章