1、为什么选择webpack
- 社区生态丰富
- 配置灵活和插件话拓展
- 官方更新迭代速度快
2、初识webpack
- webpack默认配置文件：webpack.config.js
-
可以通过webpack --config指定配置文件
image.png
3、安装webpack
webpack依赖于nodejs，安装webpack前先安装nodejs和npm - npm install webpack webpack-cli --save-dev 安装webpack
3、基本语法 - Entry的用法
单入口：entry是一个字符串
module.exports = {
entry: './path/to/my/entry/file.js'
}
多入口：entry是一个对象
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
- Output用法
Output用来告诉webpack如何将编译后的文件输出到磁盘
单入口配置
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
}
多入口配置
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
}
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
-
Loaders用法
webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中
webpack本身是一个函数，接受源文件作为参数，返回转换的结果
image.png
image.png -
plugins用法
该插件用于bundle文件的优化，资源管理和环境变量注入
作用于整个构建过程
image.png
image.png -
Mode用法
Mode用来指定当前的构建环境是：production、development还是none
设置mode可以使用webpack内置的函数，默认值为production
image.png
