使用webpack编译es6代码的方法步骤
前言
团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpack 的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，如果有 webpack 使用经验的人，就不用往下看啦。
版本说明
本文使用的 webpack 的版本为：4.30.0
开始搭建
本文的目的是使用 webpack 完成 es6 的编译，没想到过程过于简单。
安装 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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序开发报:“app.json未找到”错误的原因与解决方法
这篇文章主要介绍了微信小程序开发中常见的“app.json文件内容错误”及其解决方案,错误通常由核心文件路径错误或配置问题引起,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
这篇文章主要为大家详细介绍了JS实现元素上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length 在改变，改用for的话开始的length已经被固定，问题就解决啦2013-07-07
这篇文章主要介绍了BootStrap中的table实现数据填充与分页功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了浅谈webpack对样式的处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
下面小编就为大家推荐一篇基于JSONP原理解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了bootstrap警告框示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
使用three.js可以方便的让我们在网页中做出各种不同的3D效果，下面这篇文章主要给大家介绍了关于利用Three.js如何实现阴影效果的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
下面小编就为大家带来一篇JavaScript来实现打开链接页面的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了使用js在layui中实现上传图片压缩，layui 是一款采用自身模块规范编写的前端 UI 框架,js上传图片压缩百度有很多方法，,需要的朋友可以参考下2019-06-06
最新评论