webpack基础

一、webpack是什么

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

说白了webpack就是一个构建和管理静态资源的工具，在我们使用框架开发时，它会在我们内部的一个或者多个入口根据我们引入的各个模块将他们根据一定的规则都处理成一个个的静态资源文件，从而方便我们进行引入使用。

依赖图如下：

二、webpack优缺点

优点：

• 模块化开发。在webpack中所有的资源都可以模块化（js, css, image等），可以更方便的管理，迁移和开发。
• 语法编译。可以很方便的将浏览器不支持的语法（es6, jsx等等）借助其他loader进行按需编译，预处理等。
• 社区完善。扩展能力强，有丰富的插件并且支持自己编写插件和loader。
• 项目优化。因为有了上述这些有点和功能所以它可以更好的支持我们对项目进行优化（动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存配置等）。

缺点：

• 配置繁琐。
• 项目复杂时打包较慢。
• 对服务端渲染不友好

三、webpack基础概念

1、模式(mode)

mode可以设置webpack在构建时的模式 生产模式和开发模式，当选择模式后，webpack自身会根据自动开启一写内置的功能。

默认值为 production。

如：

module.exports = {mode: 'production',
};

2、入口(entry)

entry设置webpack从哪个文件开始进行打包，并收集依赖项。

可以设置多个入口。

如：

module.exports = {entry: './path/to/my/entry/file.js',
};

3、出口(output)

output告诉webpack在哪里输出打包好的文件，以什么样的方式命名这些输出的文件等。

默认值是 ./dist/main.js。

如：

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',},
};

4、loader

webpack 本身只能理解 JavaScript 和 JSON 文件，但是项目中还会遇到其他的文件（如css， less等）这个时候就需要使用loader去处理这些文件，并将他们输出为可以使用的资源。

它有两个属性：

• test: 匹配哪些要处理的文件。
• use: 在处理文件时应该使用哪些loader。

如：

const path = require('path');module.exports = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},
};

5、插件(plugin)

loader用于解析和处理文件，plugin则是为了扩展webpack的能力，可以进行 打包优化、资源管理、注入环境变量等等。

如：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); module.exports = {plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

6、解析(Resolve)

resolve用来对webpack设置文件扩展名、目录别名等等。

如：

module.exports = {resolve: {extensions: ['.js', '.jsx', '.json']},
};

7、优化(Optimization)

optimization用来设置webpack的内置优化性能优化，如代码分割、代码压缩等。

如：

module.exports = {optimization: {splitChunks: { },minimizer: [ ],},
};

四、总结

webpack本质上是一个静态资源模块打包工具，我们自己指定需要打包文件的入口，并且设置一定的规则，然后它就会从入口文件开始根据引入的依赖项将所有的资源构建出一个依赖图，在根据设置规则输出处理后的静态资源文件输出到我们指定的目录里面。

但是它本身只能解析js和json文件，我们在处理其他文件时需要手动的去设置去引入其他的插件才能完成我们想要的处理结果。