babel & webpack是什么

Babel is a JavaScript compiler

1. babel结合webpack处理JS模块
2. babel对于ES6新增的API不会转换，比如 Promise，Array.from, Object.assign
3. babel编译ES6代码
   3-1. npm init
   3-2. npm install --save-dev @bable/core @bable/cli
   3-3. script里添加 build: babel src -d dist src dist 分别是原文件编译后文件
   3-4. 创建bable配置文件 .babelrc
   3-4. npm run build

webpack 是静态模块打包器

1. 定义：作用静态模块（资源在本地）打包器，包括模块内的css，图片，字体
   打包成一个或多个文件。动态的内容没办法（资源在远程）
2. webpack 初体验
   2-1. 初始化项目 npm init
   2-2. 安装webpack：npm install --save-dev webpack-cli webpack
   2-3. webpack配置文件：

   //webpack.config.js
   const path = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
       mode: 'production',
       entry: './src/index.js',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename:'bundle.js',
       },
       plugins: {
       	new HtmlWebpackPlugin({
       		template: "3.html",
       		filename:"index.html",
       		chunks:['index']})
   	}
   }
   

2-4. webpack 命令行打包 scripts里
"webpack": "webpack --config webpack.config.js",

2-5. webpack 的四个概念： entry，output，loader，plugins
entry: 单入口 ， 多入口
output: path，filename 多入口文件的输出 也需配置对应的输出文件
loader: 就是让webpack能够去处理那些非JS文件的模块，module.rules
babel-loader: 连通babel 与 webpack
plugins: 执行范围更广的任务。打包优化压缩。。。

2-6. webpack 处理css文件 css-loader
javascript module: { rules: [{ test: '/\.css$/', loader: 'css-loader' }] }