概念
- webpack是一个现代javascript应用程序的静态模块打包器，
- webpack处理应用程序时他会递归的构建一个依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个build文件
重要的四个概念
- 入口（entry）
- 输出（output）
- loader(处理非js文件)
- 插件（plugins）
入口（enter）
告诉webpack 使用那个模块 来作为构建内部依赖图的开始！进图入口文件后，webpack会找到那些模块和库是入口起点（直接或者间接）的依赖！
例子：
module.exports = {
entry: './path/to/my/entry/file.js' // 我们的入口文件
};
出口（output）
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名称
}
};
loader
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· 转换一下
插件（plugins）
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'
};
