1. 目录结构:

webpack-demo.png

2. webpack 基本配置（打包）

npm install webpack webpack-cli -D 安装 webpack 和 webpack-cli
新建 webpack.config.js ，配置如下：

const path = require('path') // nodejs自带的path模块 
module.exports = { 
  mode: 'development', // 模式，可选 development 或 production 
  entry: path.join(__dirname, 'src', 'index.js'), // 入口文件，当前目录下的src目录的index.js 
  output: { // 出口 
    filename: 'bundle.js', 
    path: path.join(__dirname,'dist') 
  } 
}

path.join(__dirname) 拼凑路径，以正确的路径分割符拼接字符串路径
__dirname（两个下划线）动态获取当前文件夹的绝对路径

package.json 添加 script 如下：

"scripts": {
  "build": "webpack"
},

可指定webpack配置文件，如 "build": "webpack --config webpack.config.js"
由于我的配置文件名使用默认的webpack.config.js，故直接 webpack 即可

执行 npm run build，根据配置自动打包生成 dist目录和bundle.js

3. webpack 配置插件

npm install html-webpack-plugin -D 解析html的插件
npm install webpack-dev-server -D 启动服务的插件

修改 webpack.config.js，添加 plugins 数组 和 devServer 对象，如下：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development', 
    entry: path.join(__dirname, 'src', 'index.js'), 
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'), // 模板
            filename: 'myindex.html'
            // 实际上是将src目录下的index.html作为模板，引入bundle.js，产生新的文件 myindex.html（位于dist路径下）
            // 浏览器访问，localhost:3000/myindex.html 
        })
    ],
    devServer: {
        port: 3000, // 端口
        contentBase: path.join(__dirname, 'dist') // 目录
    }
}

package.json 添加 script 如下：

"dev": "webpack-dev-server"

同理，由于我使用默认配置文件名，故直接webpack-dev-server

执行 npm run dev ，浏览器打开 localhost:3000/myindex.html 即可

4. babel

npm install @babel/core @babel/preset-env babel-loader
@babel 表示 babel组（整个babel）
@babel/core 是babel的核心
@babel/preset-env 是babel的配置集合
babel-loader 是给webpack使用的loader

补充：使用 babel-loader做转译，但实际上，真正负责转译的是@babel/core

根目录新建 .babelrc，配置如下：

{ "presets": ["@babel/preset-env"] }

修改 webpack.config.js，添加 module 对象如下：

...
output: {},
module: {
    rules: [
        {
            test: /\.js$/,   // 检测以.js结尾的文件
            loader: ['babel-loader'],   // 使用 babel-loader
            include: path.join(__dirname, 'src'),   // 检测路径为src
            exclude: /node_modules/   // 忽略node_modules路径
        }
    ]
},
plugins:[],
...

src/index.js 中，我使用了es6 的 const 和 箭头函数

const sum = (a, b) => { return a + b }

打包转译后如下：
const 转为 var
箭头函数 转为 普通function（class也会转成function）

babel-demo.png

5. 配置生产环境（生产环境代码会进行压缩，体积相对较小）

根目录新建 webpack.prod.js，将 webpack.config.js 的内容拷贝进去并修改如下：
1）将 mode 改为 "production"
2）删除 devServer（放到线上，没必要用本地服务了）
3）output 的 filename 改为 "bundle.[contenthash].js"，contenthash是一串乱码，作为版本识别，被打包的 src/index.js 代码不变，则 contenthash 不变
4）package.json 中，"build" 改为 "webpack --config webpack.prod.js"
5）删除原有的dist目录（防止旧文件干扰），重新 npm run build