关于前端:webpack基础

简介

实质上，webpack 是一个古代 JavaScript 应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部构建一个 依赖图(dependency graph)，此依赖图会映射我的项目所需的每个模块，并生成一个或多个 bundle。

webpack 是一个打包模块化JavaScript的工具，它会从入口模块登程，辨认出源码中的模块化导入语句，递归 地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个独自的文件中

是工程化、自动化思维在前端开发中的体现。

webpack5.x曾经在去年10.1国庆期间公布上线，然而思考到不稳定性，和生态插件的更新，所以这次分享 仍以webpack4.x版本为主。(webpack@4.43.0，webpack-cli@3.3.12)

webpack4.x文档

webpack5.x文档

webpack 装置

环境筹备

nodeJs

版本参考官网公布的最新版本，能够晋升webpack的打包速度

装置形式

1. 部分装置（举荐）

   # 装置webpack V4+版本时，须要额定装置webpack-cli npm install webpack@4.44.0 webpack-cli@3.3.12 -D

2. 全局装置（不举荐）

   npm install webpack@4.44.0 webpack-cli@3.3.12 -g

全局装置webpack，这会将你我的项目中的webpack锁定到指定版本，造成不同的我的项目可能因为webpack依赖不同版 本而导致抵触，构建失败

配置外围概念

• chunk:指代码块，一个 chunk 可能由多个模块组合而成，也用于代码合并与宰割。
• bundle:资源通过 Webpack 流程解析编译后最终结输入的成绩文件。
• entry:顾名思义，就是入口终点，用来通知 webpack 用哪个文件作为构建依赖图的终点。 webpack 会依据 entry 递归的去寻找依赖，每个依赖都将被它解决，最初输入到打包成绩中。
• output:形容了 webpack 打包的输入配置，蕴含输入文件的命名、地位等信息。
• loader:默认状况下，webpack 仅反对 .js .json 文件，通过 loader，能够让它解析其余类型的文件，充当翻译官的⻆色。实践上只有有相应的 loader，就能够解决任何类型的文件。
• plugin: loader 次要的职责是让 webpack 意识更多的文件类型，而 plugin 的职责则是让其能够管制构建流程，从而执行一些非凡的工作。插件的性能十分弱小，能够实现各种各样的工作。
• mode: 4.0开始，webpack 反对零配置，旨在为开发人员缩小上手难度，同时退出了 mode 的概 念，用于指定打包的指标环境，以便在打包的过程中启用webpack 针对不同的环境下内置的优化

小试牛刀

零配置版（4.x的噱头）

• 创立一个前端工程化我的项目

  # 新建我的项目文件夹mkdir wpdemocd wbpdemo# 我的项目初始化npm init -y# 装置 webpack 依赖npm install webpack@4.44.0 webpack-cli@3.3.12 -Dmkdir srctouch index.jsvim index.js

• 执行打包命令

  npx webpack

会发现目录下多出一个 dist 目录，外面有个 main.js ，这个文件是一个可执行的JavaScript文件， 外面蕴含webpackBootstrap启动函数。

配置版

webpack 有默认的配置文件，webpack.config.js ，咱们能够对这个文件进行批改，进行个性化配置
不应用自定义配置文件: 比方 webpackconfig.js，能够通过--config webpack.config.js 来指定 webpack 应用哪个配置文件来执行构建

// webpack.config.jsmodule.exports = {  //打包入口文件   entry: "./src/index.js",   output: {    //输入文件的名称    filename: "bundle.js",    //输入文件到磁盘的目录，必须是绝对路径    path: path.resolve(__dirname, "dist")  },  mode: "production", //打包环境  module: {    rules: [         {          test: /\.css$/,          // css-loader 剖析css模块之间的关系，并合成一个css          // Style-loader 会把css-loader生成的内容，以style挂载到⻚面的heade局部          use: ["style-loader", "css-loader" ]        }     ] },  //插件配置  plugins: [new HtmlWebpackPlugin()] };

• entry：

  https://v4.webpack.docschina....

  指定 webpack 打包入口文件, Webpack 执行构建的第一步将从 Entry 开始，可形象成输出

   //单入口 SPA，实质是个字符串 entry:{   main: './src/index.js' }// 相当于简写 entry:"./src/index.js"//多入口 entry是个对象 entry:{  index:"./src/index.js",  login:"./src/login.js" } 

• output:

  https://v4.webpack.docschina....

  打包转换后的文件输入到磁盘地位:输入后果，在 Webpack 通过一系列解决并得出最终想要的代码后输入后果。

   output: {  //输入文件的名称  filename: "bundle.js",  //输入文件到磁盘的目录，必须是绝对路径  path: path.resolve(__dirname, "dist")},//多入口的解决 output: {  //利用占位符，文件名称不要反复  filename: "[name][chunkhash:8].js",  //输入文件到磁盘的目录，必须是绝对路径   path: path.resolve(__dirname, "dist")},

• mode

  https://v4.webpack.docschina....

  mode用来指定以后的构建环境（production || development || none），设置mode能够主动触发webpack内置的函数，达到优化的成果

  • 开发阶段的开启会有利于热更新的解决，辨认哪个模块变动
  • 生产阶段的开启会有帮忙模块压缩，解决副作用等一些性能

• moudle

  https://v4.webpack.docschina....

  模块，在 Webpack 里所有皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找 出所有依赖的模块。

  当webpack解决到不意识的模块时，须要在 webpack 中的 module 处进行配置，当检测到是什么格局的模块，应用什么loader来解决。

   module:{  rules:[    {      //指定匹配规定       test:/\.xxx$/,       use:{        //指定应用的loader        loader: 'xxx-load'      }    }    ] }

• loader

  https://v4.webpack.docschina....

  模块解析，模块转换器，用于把模块原内容依照需要转换成新内容。 webpack 是模块打包工具，而模块不仅仅是 js，还能够是 css，图片或者其余格局

  然而webpack默认只晓得如何解决 js 和 JSON 模块，那么其余格局的模块解决，和解决形式就须要 loader 了

  常⻅的loader：

  style-loadercss-loaderless-loadersass-loaderts-loader //将Ts转换成js babel-loader//转换ES6、7等js新个性语法 file-loader//解决图片子图 eslint-loader

• plugins

  https://v4.webpack.docschina....

  plugin 能够在 webpack 运行到某个阶段的时候，帮你做一些事件，相似于生命周期的概念 扩大插件，在 Webpack 构建流程中的特定机会注入扩大逻辑来扭转构建后果或做你想要的事件。 作用于整个构建过程

  罕用plugins

  html-webpack-plugin // 会在打包完结后，主动生成一个html文件，并把打包生成的js模块引入到该html 中。clean-webpack-plugin // 删除打包文件

  更多第三方插件，请查看 awesome-webpack 列表