概念
- 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 俩个参数
1. test
用于标识出应该被对应的 loader 进行转换的 某个 或者某个文件
2. 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
可以用来转换某些类型的模块,而插件则可以执行范围更广的任务.
插件的范围包括:
1. 打包优化
2. 压缩
3. 重新定义环境中的变量
使用一个插件 只需要 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'
};