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"
  },


相关文章
|
8月前
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
56 0
|
5月前
|
安全 前端开发 中间件
webpack开发环境
webpack开发环境
41 0
|
8月前
|
JavaScript 数据安全/隐私保护
Webpack 安装使用(详细步骤)
Webpack 安装使用(详细步骤)
76 1
|
9月前
|
前端开发 JavaScript 开发者
webpack编写一个插件
webpack编写一个插件
80 0
|
9月前
|
JavaScript 前端开发 API
webpack学习笔记(原理,实现loader和插件)下
webpack学习笔记(原理,实现loader和插件)
64 0
|
9月前
|
缓存 JavaScript 前端开发
webpack学习笔记(原理,实现loader和插件)上
webpack学习笔记(原理,实现loader和插件)
91 0
|
10月前
|
缓存 前端开发 JavaScript
学会用Webpack搭建开发环境并打包代码
学会用Webpack搭建开发环境并打包代码
学会用Webpack搭建开发环境并打包代码
|
10月前
|
JavaScript
Webpack5 系列(八):库的打包
Webpack5 系列(八):库的打包
151 0
|
11月前
|
人工智能 JavaScript
nodejs安装webpack详细步骤
nodejs安装webpack详细步骤