一步步使用 webpack 第一篇:使用 webpack 编译 es6 代码
栏目: JavaScript · 发布时间: 5年前
内容简介:团队使用的 webpack 功能很强大,有时候会碰到编译失败的情况,总得找工具的作者解决问题,自己很少去追究原因,感觉对于 webpack 的认知总是一知半解。因此,从本篇文章开始,自己从零开始配置 webpack,认真体验一下配置过程。文章内容过于简单,如果有 webpack 使用经验的人,就不用往下看啦。本文使用的 webpack 的版本为:本文的目的是使用 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 复制代码
创建文件目录
我创建的文件目录如下:
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 的目录 } }; 复制代码
添加 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 编译完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用源码编译Hadoop
- 使用 Docker 进行交叉编译
- go使用之-编译约束
- 使用 Visual Studio 编译时,让错误一开始发生时就停止编译(以便及早排查编译错误节省时间)
- 一步步使用 webpack 第二篇:使用 webpack 编译 PostCSS 代码
- 一步步使用 webpack 第四篇:使用 webpack 编译 vue 代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python Web开发:测试驱动方法
Harry J.W. Percival / 安道 / 人民邮电出版社 / 2015-10 / 99
本书从最基础的知识开始,讲解Web开发的整个流程,展示如何使用Python做测试驱动开发。本书由三个部分组成。第一部分介绍了测试驱动开发和Django的基础知识。第二部分讨论了Web开发要素,探讨了Web开发过程中不可避免的问题,及如何通过测试解决这些问题。第三部分探讨了一些高级话题,如模拟技术、集成第三方插件、Ajax、测试固件、持续集成等。本书适合Web开发人员阅读。一起来看看 《Python Web开发:测试驱动方法》 这本书的介绍吧!