【原创】webpack + babel 从老版本过度到新版本，搭建项目

使用webpack呢很简单： 先yarn init之后开始安装依赖

1、使用最新版 需要 安装依赖 webpack 和 webpack-cli这两个包

yarn add webpack webpack-cli 
可以加 --dev

2、创建源代码目录 src 以及在根目录 创建 index.html 文件， 以及webpack配置文件 webpack.dev.config.js

3、需要修改packge.json 里的配置，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。 并且添加一个node 脚本

4、然后配置webpack.dev.config.js 里的内容，这个自行去官网查看 需要 html-webpack-plugin 这个包

5、这一步就到了 我们今天的重点，配置babel， babel-preset-es2015这些包太老了，通通不用了

我先写一下以前需要配置的包:

// 我先写一下以前需要配置的包
yarn add babel-preset-es2015 babel-core babel-loader babel-polyfill babel-preset-latest
可以加 --dev

安装完依赖之后，在根目录下简历一个. babelrc 文件，来配置babel

然后配置webpack config

就可以用了，但是这些包太老了

所有我配新一点的babel包，默认可以es6 转 es5

yarn add babel-loader @babel/core @babel/preset-env

只用装这三个包.babelrc

webpack config

我用了webpack-dev-server 所有run dev 不会生成dist文件夹，会在内存中直接生成然后运行