image.png
本篇文章基于webpack官网对webpack的基本概念进行的总结。 主要基于entry, output, loader, plugin, mode几方面阐述，本篇福比较容易理解。
image.png
webpack是基于入口的。webpack会自动的递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理加载不同的文件，用plugin来扩展webpack功能。
webpack思维导图整体思想
entry（入口）
可以在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
image.png
我们看一个 entry 配置的最简单例子：
webpack.config.js
-
单个入口（简写）语法
用法：entry: string|Array<string>
module.exports = {
entry: './path/to/my/entry/file.js'
};
entry 属性的单个入口语法，是下面的简写：
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
-
对象语法
用法：entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
- 动态入口
输入为一个函数（同步或异步），用于动态的返回上面所需 的入口内容。
module.exports = {
entry: () => new Promise((resolve) => resolve(['./src/demo', './src/demo2']))
}
output（出口）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output。
image.png
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
}
// 或者
module.exports = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
多个入口起点对应的出口文件
module.exports = {
entry: {
app: './src/app.js',
goods: './src/goods.js'
},
output: {
filename: '[name].js',
path: __dirname + 'dist'
}
}
//写入到磁盘： ./dist/app.js ./dist/goods.js
loader（加载器）
直译为“加载器”。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，所以loader作用是让webpack拥有了加载和解析非javascript文件的能力。
image.png
- file-loader
- css-loader
- ts-loader
- style-loader
- url-loader
- image-loader
- babel-loader
- eslint-loadr
- source-map-loader
webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
plugins（插件）
直译为“插件”。plugin可以扩展webpack的功能，让webpack具有更多的灵活性。
image.png
- define-plugin
- commons-chunk-plugin
- uglifyjs-webpack-plugin
- paralleUglifyPlugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
mode 模式
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
image.png
module.exports = {
mode: 'production'
};
