一、关键概念

Entry
代码的入口
打包的入口
入口有一个或多个

module.exports = {
  //注意使用相对路径
  entry: './index.js'
}
module.exports = {
  //注意使用相对路径
  entry:  {
  index: './index.js',
  index2: ['./index.js']
  }
}

Output
打包成的文件（bundle）

module.exports = {
  //注意使用相对路径
  entry: './index.js',
  output: {
    filename: 'dist.js'
  }
}
module.exports = {
  //注意使用相对路径
  entry:  {
  index: './index.js',
  index2: ['./index.js']
  },
  output: {
    filename: '[name].[hash:5].js'
  }
}

Loaders
rules test use
Plugins
数组
参与打包的过程
打包或优化

5.其他概念
chunk:代码块
Bundle:打包过后的
module: 模块

二、使用webpack

webpack命令

webpack -h
webpack -vv1->v2
webpack <entry>[<entry>] <output>

webpack-cli
交互式的初始化一个项目！
迁移项目！v1->v2

npm install -g webpack-cli

webpack配置
使用webpack命令
webpack --config 配置文件名
如果配置文件名是webpack.config.js,可以直接用webpack就可以
第三方脚手架
vue-cli
angular-cli
react-starter

webpack entry.js -o output.js

// sum.js
export default function (a, b) {
  return a + b;
}
// minus.js
module.exports = function (a, b) {
 return a -b;
}
//muti.js
define(function(require, factory) {
  'use strict';
  return function (a, b) {
    return a * b;
  };
});

// app.js
// ES6 module
import sum from './sum'
// Commonjs module
let miuns = require('./minus');
//AMD module --- 异步加载模块
require(['./muti'], function (muti) {
  console.log('muti(23, 24) = ', muti(23, 24));
});
console.log('sum(23, 24) = ', sum(23, 24));
console.log('miuns(23, 24) = ', miuns(23, 24));

使用命令的方式打包：

webpack app.js -o bundle.js

使用配置文件的方式：

module.exports = {
  entry: {
    app: './app.js'
  },
  output: {
    filename: '[name]-bundle.js'
  }
}
用配置文件的方式用webpack --config 配置文件名

三、编译ES6/7
Babel Babel-loader Babel-presets Babel-plugin

npm install babel-loader@8.0.0-beta.0 @babel/core ---安装指定版本
npm install --save-dev babel-loader babel-core

1. Babel presets:
  有ES2015、ES2016、ES2017、env、babel-presets-react、babel-preset-stage 0-3;

npm install @babel/preset-env --save-dev ---安装presets最新版本
npm install babel-preset-env --save-dev ---安装普通版本

targets
targets.browsers --指定浏览器版本
targets: {
chrome: '52' // 直接指定浏览器和版本也可以的
}

targets.browsers: 'last 2 versions'
targets.browsers: '>1%'  --全球占有率超过1%

browserslist
Can I use

module.exports = {
  mode: 'development',
  entry: {
    app: './app.js'
  },
  output: {
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // use: 'babel-loader',
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['>1%', 'last 2 versions']
                  // chrome: '52'
                }
              }]
            ]
          }
        },
        exclude: '/node_modules/'
      }
    ]
  }
}

image.png

我在配置中一直报这个错误，将"babel-core": "^7.0.0-0"设置成这个版本，然后重新npm install安装依赖，依赖安装完， webpack就可以打包成功了。
babel-loader 并不能全部的es6特性，如arr.includes、Set、Generator、Map、Array.from等，这时候就要借助babel-polyfill和Babel Runtime Transform;

1. babel-polyfill
  全局的垫片，为开发应用准备，污染全部变量；

npm install babel-polyfill --save
import 'babel-polyfill'

在项目中使用：

import 'babel-polyfill'
let func = () => {};
const NUM = 45;
let arr = [1, 2, 3];
let arrB = arr.map(item => item * 2);
console.log('new Set(arrB) = ', new Set(arrB));

3、Babel Runtime Transform
局部的垫片，为开发框架准备，不污染全局变量；

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

新建.babrlrc，在这里面配置:

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ], 
  ],
  "plugins": ["@babel/transform-runtime"]
}
这里注意下targets的位置，我这边写错，找了半天错；

学习代码提交地址：https://github.com/jfengJayce/webpack4Study