本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack的核心：
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
入口(entry)：用来规定使用哪个模块作为入口，进入入口后，webpack会找出入口模块所依赖的其他模块进行处理。
配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
举个栗子：
module.exports = { ?entry: ‘./app/index.js‘};以上例子其实是以下代码的简写
const config = { ?entry: { ???main: ‘./app/index.js‘
}
};输出(output)：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
举个栗子：
module.exports = { ?output: { ???path: "/public",// 打包后的文件存放的地方 ???filename: "bundle.js"// 打包后输出文件的文件名 ?}}loader：webpack自身只理解javascript文件，所以loader的作用就是处理非javascript文件，然后webpack再对他们进行处理。
在 webpack 配置中定义 loader 时，要定义在 module.rules中。
const config = { ?module: { ???rules: [ ?????{ test: /\.txt$/, use: ‘raw-loader‘ } ???] ?}};module.exports = config;主要的两个配置：
test: 需要被转换的文件后缀
use:使用哪种类型的loader去转换
这就相当于告诉webpack，当遇到.txt文件时，需要先用loader处理后再进行打包。
插件(plugins)：使用插件，需要通过require引入，然后把它添加到plugins数组中，并通过new操作符来创建它的实例。
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // 通过 npm 安装const webpack = require(‘webpack‘); // 用于访问内置插件const config = { ?module: { ???rules: [ ?????{ test: /\.txt$/, use: ‘raw-loader‘ } ???] ?}, ?plugins: [ ???new webpack.optimize.UglifyJsPlugin(), ???new HtmlWebpackPlugin({template: ‘./src/index.html‘}) ?]};module.exports = config;模式：通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
module.exports = { ?mode: ‘production‘};如果设置为development，则会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
如果设置为production 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
webpack简介
原文地址：https://www.cnblogs.com/lqw007/p/9592122.html