概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
入口（entry）
入口起点指示webpack应使用哪个模块，来作为构建其内部依赖图的开始。
可以通过在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为 ./
module.exports = {
entry: './path/to/my/entry/file.js'
}
出口（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(_dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
loader
loader让webpack能够去处理那些非javascript文件（webpack自身只理解javascript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。
loader用于对模块的源代码进行转换。loader可以使你在import或“加载”模块时预处理文件。因此，loader类似于其他构建工具中“任务（task）”，并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言（如TypeScript）转换我javascript，或将内联图像转换为data URL。loader甚至允许你直接在javascript模块中importCSS文件
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
插件（plugins）
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
模式
通过选择development或production之中的一个，来设置mode参数，你可以启用相应模式下的webpack内置的优化
module.exports = {
mode: 'production'
};
模块
在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
-
webpack一切皆模块，js/css/图片/字体都是模块。静态解析，按需打包，动态加载。
图片.png
图片左侧为依赖模块:
箭头表明了模块间的依赖关系
JS文件会依赖其他各模块(JS依赖CSS,CSS依赖图片)
图片右侧为打包后的静态资源
Webpack根据模块的依赖关系进行静态分析，生成对应的静态资源
Webpack中,前端的所有资源文件(js/json/css/img/less等)都会作为模块处理
注意:左侧模块中并没有html,在Webpack的世界中html不是模块
安装
一般在项目中使用webpack，都先执行下面这四条命令进行webpack的安装
1、在全局安装webpack。第一次使用时执行
npm install -g webpack
2、将webpack安装到项目中
npm install --save-dev webpack
3、npm初始化，会询问你的项目信息，可以回车跳过
npm init
4、在当前项目，安装webpack服务器
npm install --save-dev webpack-dev-server
安装完成后，便是建立配置文件了。
基本配置
在项目根目录下新建名为webpack.config.js的文件，基本上一个配置文件的大体结构就是下面这样：
var path = require('path')
modules.export={
entry:{
/* 入口文件 */
ab:'./component/ab.js',
},
output:{
/* 出口文件 */
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
},
module:{
/* Loader */
rules:[{},{},{}]
},
plugins:[
/* 插件 */
],
devtool: ...
devServer: {...}
resolve:{...}
}
webpack要求webpack.config.js的输出模块为一个对象，且包含两大基本属性：entry和output。entry,顾名思义，入口文件，上面代码表示component／ab.js是入口文件，output/bundle.js是输出文件。由于component／ab.js引入（require）了a.js文件和b.js文件，这三个文件会被一起打包dist/bundle.js中，（注：entry中可以写入相对路径）
var path = require('path')
path.resolve(__dirname,'dist')
这段代码什么意思？path是node的内置模块，resolve是它的一个方法,__dirname表示当前目录在磁盘中的绝对路径，path.resolve(__dirname,'dist') = __dirname + '／dist' （注意：必须为绝对路径，不能为相对路径！）