从0到1，webpack踩坑笔记-白红宇

最近在搞公司的移动官网，之前一直使用前辈的框架,当自己搭的时候，发现是一步一个坑呀。之前使用的webpack3，babel6的很多属性和用法已经废弃，心累，小本本记一下。

基本目录如下：

babel7升级说明

webpack4和webpack3的对比

从0到1配置项目

webpack优化

一.babel7升级说明

官网对babel7 的升级说明：

总结一下主要有以下几点

1.babel7已删除对Node.js 0.10,0.12,2和5的支持,建议使用v8+

2.这些预设应替换为“env”预设(@babel/preset-env)

babel-preset-es2015

babel-preset-es2016

babel-preset-es2017

babel-preset-latest

以上^的组合

3.删除提案polyfill(@babel/polyfill)

换言之，要这样使用了

下载

npm install @babel/runtime-corejs2

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

babelrc

{

"plugins": [

- ["@babel/plugin-transform-runtime"],

+ ["@babel/plugin-transform-runtime", {

+ "corejs": 2,

+ }],

]

}

//全部引入

import "core-js/shim"

import "regenerator-runtime/runtime";

//部分引入

import "core-js/fn/array/flatMap";

4.版本依赖@babel/core

5.包的重命名

{

- "presets": ["@babel/preset-react"],

+ "presets": ["@babel/react"], // this is equivalent

- "plugins": ["@babel/transform-runtime"],

+ "plugins": ["@babel/plugin-transform-runtime"], // same

}

6.范围包裹 babel=>@babel

module.exports = {

presets: ["@babel/env"], // "@babel/preset-env"

plugins: ["@babel/transform-arrow-functions"], // same as "@babel/plugin-transform-arrow-functions"

};

7.对不是正式的包进行-proposal标记，表明提案不是正式的JavaScript

@babel/plugin-transform-function-bind =》@babel/plugin-proposal-function- bind（第0阶段）

@babel/plugin-transform-class-properties =》@babel/plugin-proposal-class-properties（第3阶段）

8.从包名中删除年份

@babel/plugin-transform-es2015-classes=>@babel/plugin-transform-classes

use strict and this in CommonJS (暂时没用到，以后补充）

10.React和Flow预设的分离

babel-preset-react一直包括flow插件。当我们决定支持TypeScript时，这个问题变得复杂了。如果您想使用React和TypeScript预设，我们必须找到一种通过文件类型或指令自动打开/关闭语法的方法。最后，更容易完全分离预设。

{ - "presets": ["@babel/preset-react"]

+ "presets": ["@babel/preset-react", "@babel/preset-flow"] // parse & remove flow types

+ "presets": ["@babel/preset-react", "@babel/preset-typescript"] // parse & remove typescript types

}

11.选项解析

{

- "presets": "@babel/preset-env, @babel/preset-react"

+ "presets": ["@babel/preset-env", "@babel/preset-react"]

}

12.插件/预设导出(暂时没用到，以后补充）

13.解析基于字符串的配置值(暂时没用到，以后补充）

14.基于路径only和ignore模式(暂时没用到，以后补充）

15.babel相关包的变化

babel-nodeBabel 6中的命令是该babel-cli软件包的一部分。在Babel 7中，此命令已拆分为自己的@babel/node包，因此如果您使用该命令，则需要添加此新依赖项。

@babel/runtime， @babel/plugin-transform-runtime

@babel/runtime现在只包含帮助程序，如果需要core-js，可以使用@babel/runtime- corejs2转换中提供的选项。使用@babel/runtime和@babel/runtime-corejs2，仍然需要

@babel/plugin-proposal-object-rest-spread ...对象后不能出现尾随逗号

@babel/plugin-proposal-class-properties

@babel/plugin-transform-export-extensions 拆分为 @babel/plugin-proposal- export-default-from和 @babel/plugin-proposal-export-namespace-from的提案

export v from "mod"; //@babel/plugin-proposal-export-default-from

export * as ns from "mod";//@babel/plugin-proposal-export-namespace-from

@babel/plugin-proposal-decorators

在预期新的装饰器提议实现时，我们决定将其作为新的默认行为。这意味着要继续使用当前装饰器语法/行为，必须将 legacy 选项设置为 true 。

{

"plugins": [

- "@babel/plugin-proposal-decorators"

+ ["@babel/plugin-proposal-decorators", { "legacy": true }]

]

}

删除babel-plugin-transform-class-constructor-call

将babel-plugin-transform-async-to-module-method作为一个选项合并到常规异步插件中

babel-core/register Babel 7中删除了已弃用的用法;而是使用独立包@babel/register

@babel-core删除 babel-core/src/api/browser.js,浏览器请使用