从webpack初始化,到配置babel环境

2019-06-13 admin

一、新建项目文件夹,在文件夹打开终端运行npm init,一直回车 二、安装babel所需要的包

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

三、根目录下新建babel.config.js,填入:

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

四、根目录下新建webpack.config.js,填入:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

五、执行,安装webpack,根据提示安装webpack-cli

npm install webpack --save-dev 

六、修改packge.json,script填入

 "build": "webpack"

七、命令行运行,npm run build

[转载]原文链接:https://segmentfault.com/a/1190000019470712

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67231.html

文章标题:从webpack初始化,到配置babel环境

相关文章
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
Windows系统下使用Sublime搭建nodejs环境
1.下载nodejs,并安装ok后,配置好环境变量。 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件(https://github.com/...
2017-03-22
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
node.js读取文件到字符串的方法
本文实例讲述了node.js读取文件到字符串的方法。分享给大家供大家参考。具体分析如下: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始。比较独特的是,Node.js会假设你是在POSIX环境...
2017-03-27
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
javascript实现倒计时(精确到秒)
代码相当简单实用,这里就不多废话了,小伙伴们简单看下就能明白 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional&#x2...
2017-03-25
js+html5绘制图片到canvas的方法
本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="m...
2017-03-24
JavaScript实现滑动到页面底部自动加载更多功能
话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); /&#x2F...
2017-03-17
回到顶部