前言
为什么要使用构建工具？
1.转换ES6语法（很多老版本的浏览器不支持新语法） 2.转换JSX 3.CSS前缀补全/预处理器 4.压缩混淆（将代码逻辑尽可能地隐藏起来） 5.图片压缩 6. ....
为什么选择webpack？
- 社区生态丰富
- 配置灵活、插件化扩展
- 官方更新迭代速度快
基础概念
默认的配置文件是weback.config.js，在package.json中配置脚本可以通过webpack --config来指定构建使用的配置文件。
初始化
创建并进入新的目录，执行如下命令，初始化package.json文件，这是一个模块的描述文件，-y的意思是所有配置都是yes
npm init -y
安装webpack
npm install webpack webpack-cli --save-dev
核心概念
先看一下一份最简单的webpack配置是什么样的
const path = require('path');
module.exports = {
entry: './src/index.js', // 打包的入口文件
output: { // 打包后的输出
filename: "bundle.js",
path: path.join(__dirname, "/dist")
},
mode: 'development', // 所处环境
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader"
},
......
]
},
plugins: [
new HtmlWebpackPlugin(),
]
};
entry
打包的入口文件
单入口：
entry: "./src/index.js"
多入口（适用于多页面场景）：
entry: {
app: "./src/app.js",
adminApp: "./src/adminApp.js",
}
output
打包之后的输出
单输出：
output: {
filename: "bundle.js",
path: __dirname + "/dist"
}
多输出：
output: {
filename: "[name].js", // 占位符[name]代表entry中的key
path: __dirname + "/dist"
}
Loaders
webpack只支持JS和JSON两种文件类型，要想支持其他文件类型且转化成有效的模块，需要通过Loaders。Loaders本身是一个函数，接收源文件做参数，返回转换的结果。
常见的Loaders
babel-loader 转换ES6/ES7等语法 css-loader 支持.css文件的加载和解析 less-loader 将less文件转换成css ts-loader 将TS转换成js file-loader 将图片、字体等的打包 raw-loader 将文件以字符串的形式导入 thread-loader 多线程打包JS和CSS
Plugins
插件用于打包文件的优化，资源管理和环境变量注入，作用于整个构建过程。也可以理解为Loaders无法完成的事情都可以用Plugins完成。
常见的Plugins：
CommonsChunkPlugin 常用于多页面打包情况下，将多个页面公用的js代码块提取成公共js CleanWebpackPlugin 清理构建目录 ExtractTextWebpackPlugin 将CSS从bundle文件里提取成一个独立的CSS文件 CopyWebpackPlugin 将文件或文件夹拷贝到够贱的输出目录 HtmlWebpackPlugin 创建html文件去承载输出的bundle。这个非常有用，不需要我们手动去创建html文件 UglifyjsWebpackPlugin 压缩JS ZipWebpackPlugin 将打包的资源生成一个zip包
mode
用来指定当前的构建环境，值有 production 、development 、none，默认是production。通过mode可以使用webpack内置的函数和功能：
developement
开启 NamedChunksPlugin 和 NamedModulesPlugin 在代码热更新阶段，打印哪个模块发生了更新
production
开启 FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin，OccurrenceOrderPlugin , SideEffectsFlagPlugin 和 TerserPlugin
none
不开启任何优化
webpack基础功能
解析ES6
使用babel-loader, babel的配置文件是.babelrc, 增加ES6的babel preset配置
1.安装包
npm install @babel/core @babel/preset-env babel-loader -D
2.创建.babelrc文件，并添加配置
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}
3.webpack.config.js配置
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader", // 用来解析ES6
},
]
},
解析JSX
增加babel preset配置：
"@babel/preset-react"
要在React中使用箭头函数，需要安装插件
npm i @babel/plugin-proposal-class-properties
// .babelrc
"plugins": [
"@babel/plugin-proposal-class-properties"
]
解析CSS/CSS预处理/前缀补全
less-loader 将less转化成css css-loader 让webpack解析css文件，并转换成commonjs对象，插入到JS里（因为webpack本身只支持js和json） style-loader 将样式通过