首先看一些核心概念：

1.Entry 从 webpack4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js。

2.Output 输出属性规定哪里创建以及如何命名输出文件。默认./dist/main.js为主输出文件和./dist任何其他生成文件的文件夹。

3.Loaders 使用加载器来预处理文件。（如babel-loader、css-loader）

4.Plugins 插件利用webpack的编译过程执行一些任务，如优化、环境变量配置

5.Mode 通过设定mode参数设置为development，production或者none。启用对应于每个环境的WebPack内置的优化。

6.Browser Compatibility webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）。如果要支持旧版浏览器，则需要加载polyfill以支持一些新的语法。

使用init初始化 package.json。

npm init -y

安装webpack、 webpack-cli 模块

npm i webpack --save-dev

在src目录下新建index.js作为入口文件。此时运行npm run build会发现已经有了dist目录。
此时虽然输出了 ./dist/main.js，但是控制台提醒'mode'使用哪种模式（production(生产) 和 development(开发) 模式。）。

webpack.config.js

module.exports = {  entry: './src/index.js' //需要打包的文件入口};

开箱即用，webpack不需要您使用配置文件。但是，它将假定您的项目的入口点为src/index并将结果dist/main.js缩小并优化生产。

使用webpack编译的代码中可用的所有方法。使用webpack捆绑应用程序时，您可以选择各种模块语法样式，包括ES6，CommonJS和AMD，推荐使用ES6。

//3种模块化规范//AMDdefine(function() {    return function(a, b) {        return a + b    }})require(['./module/amd'], function(amd) {    console.log(amd(1, 2))})//commonJSmodule.exports = function(a, b) {    return a + b}let common = require('./module/common')console.log(common(1, 2))//ES6export default function(a, b) {    return a + b}import es6 from './module/es6'console.log(es6(1, 2))

webpack.config.js

const path = require('path')const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = {  entry: {    app: './app.js' // 需要打包的文件入口  },  output: {    publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址    path: path.resolve(__dirname, 'dist'), // 打包文件目录    filename: 'bundle.js' // 打包后的 js 文件  },  rules: [    {      test: /\.js$/, // 使用正则来匹配 js 文件      exclude: /node_modules/, // 排除依赖包文件夹      use: {        loader: 'babel-loader' // 使用 babel-loader      }    }  ],  "browserslist": [    "> 1%",    "last 2 version",    "not ie <= 8"  ],  plugins: [    new CleanWebpackPlugin(), // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。    new HtmlWebpackPlugin({      // 打包输出HTML      title: '自动生成 HTML',      minify: {        // 压缩 HTML 文件        removeComments: true, // 移除 HTML 中的注释        collapseWhitespace: true, // 删除空白符与换行符        minifyCSS: true // 压缩内联 css      },      filename: 'index.html', // 生成后的文件名      template: 'index.html' // 根据此模版生成 HTML 文件    })  ]}

参考链接：webpack指南
参考链接：实例带你入门并掌握Webpack4