webpack配置 babel

Songlcy 发布于2019-08-22 16:12 / 2452人阅读

摘要：三集成所需要的依赖和在或加载模块时，对代码进行预处理，语法转化为语法。到目前位置，用于开发应用的环境已经配置好了。

本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。

若你对webpack的概念还不了解，先查看相应文档webpack中文文档

一、初始化一个webpack项目

npm init -y                     // 初始化项目，会添加一个package.json
npm install --save-dev webpack  // 下载webpack，并记录到package.json的devDependencies中

二、新建webpack.config.js文件

指定入口和出口。

// webpack.config.js
const path = require("path");

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

当前项目目录为

dist            // 手动新建，因出口指定为此文件夹。
 |---index.html
src
 |---index.js
package-lock.json
package.json
webpack.config.json

三、集成babel

所需要的依赖：babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtime

babel-loader：在import或加载模块时，对es6代码进行预处理，es6语法转化为es5语法。
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.
babel-preset-env：指定规范，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，静态方法比如Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
babel-runtime babel-plugin-transform-runtime：与babel-polyfill作用一样，使用场景不一样。

为了更简单明了，把依赖的安装分开，不一次性安装所有依赖。

1、安装babel-loader和babel-core

npm install --save-dev babel-loader babel-core

在webpack.config.js中添加

module: {
    rules: [
      {
        test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 符合此正则规则的文件，运用 loader 去进行处理，除了exclude 中指定的内容
      }
    ]
  }

2、安装babel-preset-env

npm install babel-preset-env --save-dev

新建 .babelrc 文件

//babelrc
{
  "presets": ["env"]
}

3、安装babel-polyfill

此依赖用于开发应用，会在全局添加新的方法，会污染全变量。

npm install --save babel-polyfill

在入口文件本文为index.js的顶部添加

import "babel-polyfill"

在webpcak.config.js中将babel-polyfill添加到entry数组中

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  ...

最终webpack.config.js为

const path = require("path");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  mode:"development",
  module: {
    rules: [
      {
        test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 符合此正则规则的文件，运用 loader 去进行处理，除了exclude 中指定的内容
      }
    ]
  }
};

项目目录为

dist            // 手动新建，因出口指定为此文件夹。
 |---index.html
src
 |---index.js
.babelrc
package-lock.json
package.json
webpack.config.json

到目前位置，用于开发应用的babel环境已经配置好了。
执行

npx webpack --config webpack.config.js

便可在dist中看到打包出来的bundle.js文件

4.babel-runtime 和 babel-plugin-transform-runtime

如果你不是开发应用，而是开发提供给第三方利用的框架的话，将第3步的polyfill改为这两个依赖。它们在局部添加新方法，不污染全局变量

npm install --save-dev babel-runtime babel-plugin-transform-runtime

.babelrc文件

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

用于开发框架的babel环境已经配置好，
同样执行

npx webpack --config webpack.config.js

便可在dist中看到打包出来的bundle.js文件

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

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

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material D

摘要：建立项目首先，创建工程目录现在我们已经创建了我们要开发应用程序的文件夹，接着需要添加一个文件。这里为了版本的一致性，我把里的版本号前面删除了。为此，需要创建一个名为的文件，用来配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！在过去的一年和...

asoren 2019-08-23 15:17 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
webpack - babel配置

摘要：配置是一个编译器，是前端开发中的一个利器。其中，插件是为了告诉只编译批准的内容，相当于及最新版本。安装用法将下面内容添加到文件中更多细节参考插件。 webpack - babel配置 babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。通过构建和babel，可以使用最新js语法进行...

yunhao 2019-08-22 16:00 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0