乐趣区

关于前端:webpack基础

jiezi

简介

实质上，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

  1. 全局装置（不举荐）

    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 wpdemo
cd wbpdemo
# 我的项目初始化
npm init -y
# 装置 webpack 依赖
npm install webpack@4.44.0 webpack-cli@3.3.12 -D
mkdir src
touch index.js
vim index.js

  • 执行打包命令

    npx webpack

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

配置版

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

// webpack.config.js
module.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-loader
css-loader
less-loader
sass-loader
ts-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 列表

退出移动版