webpack前端模块化构建详解-优快云博客

webpack的基本使用

概念： webpack是前端工程化的具体解决方案

主要工能： 它提供了友好的 前端模块化开发 支持，以及 **代码压缩混淆、处理浏览器端Javascript的兼容性、性能优化 ** 等强大的功能。

module.exports = {
    //webpack的运行模式，可选择development和production
    //development：开发阶段选择
    //production：项目发布阶段使用
    mode: 'development'
}

webpack.config.js 是webpack 的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意： 由于webpack 是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js 相关的语法和模块进行webpack 的个性化配置。

在webpack 4.x和5.x的版本中，有如下的默认约定：

在webpack.config.js 配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

在这里插入图片描述

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：

webpack-dev-server

html-webpack-plugin

修改package.json-> scripts中的dev命令如下：

"scripts": {
    "dev": "webpack serve"
  },

再次运行npm run dev 命令，重新进行项目的打包

注意：webpack-dev-server会启动一个实时打包的http服务器

在这里插入图片描述

解惑html-webpack-plugin
- 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中
- HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

在webpack.config.js配置文件中，可以通过devserver节点对webpack-dev-server插件进行更多的配置，

在这里插入图片描述

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

在实际开发过程中，webpack默认只能打包处理以.jsl后缀名结尾的模块。其他非js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！、

loader加载器的作用：协助webpack打包处理特定的文件模块。比如：

在这里插入图片描述

在这里插入图片描述

其中，test表示匹配的文件类型，use表示对应要调用的loader

注意：

webpack默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
由于代码中包含了index.css这个文件，因此webpack默认处理不了
当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件.看module.rules数组中，是否配置了对应的loader加载器.
webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
当ess-loader处理完毕之后，会把处理的结果，转交给下一个loader（转交给style-loader）
当style-loader处理完毕之后，发现没有下一个loader7，于是就把处理的结果，转交给了webpack
webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件.