webpack4环境搭建-编译ES6

简介: webpack4环境搭建-编译ES6

babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。这里我统一安装最新的版本,如果出现了错误,可以查看是不是babel 版本问题。

(一)相关介绍

1、babel-loader: 负责 es6 语法转化

2、@babel/preset-env: 包含 es6、7 等版本的语法转化规则

3、@babel/polyfills: es6 内置方法和函数转化垫片,用来实现所有新的javascript功能,比如 Promise ,,Array.prototype.includes 等

安装相关依赖包@babel系列,webpack4

安装@babel 相关

npm install --save-dev @babel/core @babel/preset-env
npm install --save @babel/polyfill //(注意没有-dev )

安装webpack 相关

npm install --save-dev babel-loader

(二)webpack中使用babel

在根目录创建.babelrc文件,里面写下如下代码:

{
    "presets": [
            "@babel/preset-env"
    ]
}

在根目录创建webpack.config.js文件,里面代码如下:

module.exports = {
  entry: {
    app: "./src/main.js"
  },
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

这里需要注意项目入口并不是./src/index.js,而是./src/main.js,所以我们必须在项目里创建src目录,并在src目录里创建main.js

当然了我们的packjson.js文件修改如下

"scripts": {
    "dev": "webpack --mode development --config webpack.config.js"
  },


相关文章
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
75 0
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
59 0
|
5月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
254 3
|
开发工具
(已解决)求助!!!webpack编译失败,vue___jb_tmp___ ,但是加一个回车,或者打个空格就好了..
求助!!!webpack编译失败,.vue___jb_tmp___ (Permission denied)错误解决办法
93 0
|
前端开发
webpack学习笔记(四) 自动编译
webpack学习笔记(四) 自动编译
110 0
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置
|
缓存 JSON 资源调度
真香 - Webpack5 新特性之增量编译
webpack作为最使用最广泛的前端打包工具,已经成为前端工程化基础设施的一部分。 webpack5正式发布于2020年10月10号,距离上一个大版本Webpack4更新已经是2年前年了,每个大版本的升级都会有相当多的改变和提升,今天咱们就来看看增量编辑和长期缓存。
304 0
真香 - Webpack5 新特性之增量编译
|
前端开发 JavaScript
webpack4环境搭建-处理css,sass以及压缩
webpack4环境搭建-处理css,sass以及压缩