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

jayzou 发布于2019-08-23 18:06 / 675人阅读

摘要：一新建项目文件夹，在文件夹打开终端运行一直回车二安装所需要的包三根目录下新建，填入四根目录下新建，填入五执行，安装，根据提示安装六修改填入七命令行运行

一、新建项目文件夹，在文件夹打开终端运行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

私有云云服务器小程序从云环境更换到服务器 webpack cdn配置 webpack配置cdn webpack常用配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104677.html

最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
webpack4 的开发环境配置说明

摘要：的开发环境配置说明完整的的配置地址开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后，当运行时，在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们...

fancyLuo 2019-08-23 10:34 评论0 收藏0
使用webpack和babel搭建react开发环境

摘要：译文原文来自写在前面使用已经蛮长一段时间但是在新项目开始之际都是东拼西凑其他项目的配置来使用如果要自己从零开始写一个完整项目的配置估计得费死劲所以在发布版本之际正是时候来认真从零开始学习了是一个出自的库用于构建用户交互界面是一个非常厉害的有译文,原文来自https://scotch.io/tutorials/s...写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,...

AZmake 2019-08-20 15:58 评论0 收藏0
从0到1搭建webpack2+vue2自定义模板详细教程

摘要：安装安装完成之后，你应该可以使用了，方式如下上述命令应该自动在浏览器中打开。前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用官方的webpack模板居多，不过对于很多人来说，官方的webpack模板的配...

cartoon 2019-08-20 16:38 评论0 收藏0
从零到一，新建webpack工程

摘要：指定启用例如上述代码，就使用和处理了除了以外的。设置当前的为，同样这个配置也可以写在中。设置目录删除注释去除空格去除属性引号复制静态目录将所以可能被请求的静态文件，分别放在目录下。结语本次从零到一，新建了一个脚手架。 react-sample-javascript 为了实现一个可定制化高的react工程，我们往往会自己搭建一个react工程。所以本文会从零开始搭建一个react脚手架工...

Code4App 2019-08-26 12:08 评论0 收藏0