告诉webpack 使用那个模块 来作为构建内部依赖图的开始！进图入口文件后，webpack会找到那些模块和库是入口起点（直接或者间接）的依赖！
例子：
module.exports = {
entry: ‘./path/to/my/entry/file.js‘ // 我们的入口文件
};output告诉webpack从哪里产出builds 以及如何命名这些文件 默认值是 ./dist。这样整个应用程序结构都会编译到你指定的文件夹中。
例子
const path = require(‘path‘);
module.exports = {
entry: ‘./path/to/my/entry/file.js‘, // 入口文件
output: {
path: path.resolve(__dirname, ‘dist‘), // 打包后的文件夹的名字及路径
filename: ‘my-first-webpack.bundle.js‘ // 打包后的js名称
}
};loder 让webpack能狗处理那些 非javascript 的文件（webpack自身只理解javascript）。loader可以将所有类型文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack打包模块 来对他们进行处理。
本质上 webpack loader 是将 所有类型的文件 转化为 应用程序依赖图（最终的bundle） 可以直接进行引用。
webpack loader 俩个参数
test 用于标识出应该被对应的 loader 进行转换的 某个 或者某个文件use 标识转换时应该使用那个loader例子:
const path = require(‘path‘);
module.exports = {
entry: ‘./path/to/my/entry/file.js‘, // 入口文件
output: {
path: path.resolve(__dirname, ‘dist‘), // 打包后的文件夹的名字及路径
filename: ‘my-first-webpack.bundle.js‘ // 打包后的js名称
},
module: {
rules: [
{ test: /\.txt$/, use: ‘raw-loader‘ }
]
}
};解释：
raw-loader webpack 的原始模块 将文件加载为字符串
module 这块的配置告诉 webpack 在打包过程中 遇到【require 或者 import】语句被解析为 ·.txt·的时候 请用·raw-loader· 转换一下
loader 可以用来转换某些类型的模块，而插件则可以执行范围更广的任务.
插件的范围包括：
使用一个插件 只需要 require 它。 然后给它添加到 plugins 数组中。 多数插件可以通过 options 来定义。
注意：如果你在一个配置文件中多次的使用同一个插件时，这时候需要通过new 操作符来重建一个新的实例。
例子：
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // html 需要npm 安装一下
const config = {
module: {
rules: [
{ test: /\.txt$/, use: ‘raw-loader‘ }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(), // 压缩js
new HtmlWebpackPlugin({template: ‘./src/index.html‘}) // 指定模板
]
};通过 development 或 ·production· 之中的一个 来设置 mode 参数， 来启动 webpack 内置的优化
module.exports = {
mode: ‘production‘
};原文：https://www.cnblogs.com/ningzy/p/9184502.html