1.检验webpack规范支持

webpack支持ES6，CommonJS，AMD规范
创建wendor文件夹，其中minus.js,multi.js和sum.js分别用CommonJS，AMD，ES6规范编写

// CommonJS minus.js
module.exports = function(a,b) {
  return a - b;
}
// AMD multi.js
define([
  'require',
  'dependency'
], function(require, factory) {
  'use strict';
  return function(a,b) {
    return a * b;
  }
});
// ES6 sum.js
export default function(a,b) {
  return a + b;
}

在index.js中引入以上三个文件

2.编写配置文件覆盖 entry/output

webpack.config.js是webpack默认配置的文件名，在根目录下创建：

let path = require('path');
module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    path: path.resolve(__dirname,'dist'), // __dirname 是指webpack.config.js的绝对路径  dist 是指出口的目录
    filename: 'bundle.js', // 打包输出的文件夹的文件名
    publicPath: __dirname + '/dist/' // 打包后的文件夹
  },
  module: {},
  plugins: []
}

path.resolve() 方法会把一个路径或者是路径片段的序列解析为一个绝对路径
__dirname：当前模板的文件夹名称。

可以使用console.log输出下就明白了

执行npm run build 打包js文件
会发现生成了dist文件，并且生成了两个打包后的文件

这跟AMD的引入方式有关，如果在app.js中注释掉AMD的写法，则只会打包出一个bundle.js文件

在实际写代码的时候，最好使用 ES6 和 CommonJS 的规范来写

当你注释AMD后，打包后的dist中有多个文件，这是因为打包的时候没有先删除掉dist文件，在打包，我们需要使用一个插件来帮助我们实现：github链接：clear-webpack-plugin
1.安装插件
npm install clean-webpack-plugin —save-dev
2.修改webpack配置文件

let path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    path: path.resolve(__dirname,'dist'), // __dirname 是指webpack.config.js的绝对路径  bundle 是指出口的文件名
    filename: 'bundle.js', // 打包输出的文件夹的文件名
    publicPath: __dirname + '/dist/' // 打包后的文件夹
  },
  module: {},
  plugins: [
    new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path中所有的文件，以及每次重建后所有未使用的webpack的产品。
  ]
}

之后在执行npm run build就可以了

打包后的js文件会按照我们的配置放在dist目录下，创建一个html文件，引用打包好的js文件，打卡F12就能看到效果了。

参考文献

webpack4 系列教程 (一): 打包 JS
Webpack4 教程：从零配置到生产模式

webpack4.0

（三）覆盖默认entry和output

1.检验webpack规范支持

2.编写配置文件覆盖 entry/output

参考文献