webpack主要有四个核心概念：
1、入口（entry）
2、输出（output）
3、loader
4、插件（plugins）
入口（entry）：
入口会只是webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口七点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。在webpack中入口有多种方式来定义。
单个入口语法：
const config={ entry:"./src/main.js" }
对象语法：
const config={ app:"./src/main.js", vendors:"./src/vendors.js" }
输出（output）：
output属性会告诉webpack在哪里输出它创建的bundles，以及如何命名这些文件，默认值为./dist
const config={ entry:"./src/main.js", output:{ filename:"bundle.js", path:path.resolve(__dirname,‘dist‘) } }
loader：
loader让webpack可以去处理那些非JavaScript文件（webpack资深只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够有效处理的模块，例如，开发的时候使用ES6，通过loader将ES6的语法转为ES5，如下配置：
const config={ entry:"./src/main.js", output:{ filename:"bundle.js", path:path.resolve(__dirname,‘dist‘) }, module:{ rules:[ { test:/\.js$/, exclude:/node_modules/, loader:"babel-loader", options:[ presets:["env"] ] } ] } }
插件（plugins）：
loader被用于转换某些类型的模块，而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。使用一个插件也非常容易，只需要require()，然后添加到plugins数组中
//通过npm安装 const HtmlWebpackPlugin=require(‘html-webpack-plugin‘); //用于访问内置插件 const webpack=require(‘webpack‘); const config={ module:{ rules:[ { test:/\.js$/, exclude:/node_modules/, loader:"babel-loader" } ] }, plugins:[ new HtmlWebpackPlugin({template:‘./src/index.html‘}) ] }
利用webpack搭建应用：
webpack.config.js
const path = require(‘path‘); module.exports = { mode: "development", // "production" | "development" // 选择 development 为开发模式， production 为生产模式 entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, ‘dist‘) }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: [ presets: ["env"] ] } ] }, plugins: [ ... ] }
上述例子构建了一个最简单的配置，webpack 会从入口 main.js 文件进行构建，通过 loader 进行js转换，输出一个为 bundle.js 的文件，至此一整个过程就构建完成。
原文：https://www.cnblogs.com/chao202426/p/12469745.html