webpack基础入门学习笔记 - 珠峰架构の

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack官网 3天搞定 webpack —珠峰架构

1、webpack概述

• webpack实现功能

  ​ 代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

• 前提基础

  • nodejs 基础，以及 npm 的使用
  • 掌握 EcmaScript 6 的基本语法

• 掌握内容

  1. webpack 的常见配置
  2. webpack 高级配置
  3. webpack 优化策略
  4. ast 抽象语法树
  5. webpack 中的 Tapable
  6. 掌握 webpack 流程，手写 webpack
  7. 手写 webpack 常见 loader
  8. 手写 webpack 中常见的 plugin

2、安装使用 webpack

安装使用

• 装包

  1、将 webpack 安装在本地项目的开发环境当中
  npm init -y
  npm install webpack webpack-cli -D
  

• 新建配置

  2.1 一般会自动创建配置文件 webpack.config.js
  
  2.2 如果没自动创建，则手动在项目根目录下新建一个配置文件 webpack.config.js
  const path = require("path")
  
  module.exports = {
      mode: 'development',	// 模式：开发环境 development 生产环境 production
      entry: path.join(__dirname,'./src/index.js'),	// 默认文件入口
      output: {										// 默认出口配置
          path: path.join(__dirname,'./dist'),		// 输入的目录
          filename: 'bundle.js'						// 打包的文件名
      }
  }
  

• 运行打包

  3.1 运行 webpack-cli 提供的打包命令
  npx webpack
  
  3.2 可以再 packge.json 中配置脚本命令
  "scripts": {
      "build": "webpack --config webpack.config.js"
   }
  执行 npm run build
  

手动配置 webpack

• 常用配置项解释

@	配置项	意义	参数类型	举例	备注
1	mode	模式	string	开发development，生产production	生产环境会自动压缩代码
2	entry	默认文件入口	string	path.join(__dirname,'./src/index.js')	常配合path写路径
3	output	默认出口配置	object
	*path	输入的目录	string	path.join(__dirname,'./dist')	常配合path写路径
	*filename	打包的文件名	string	bundle.js
4	devServer	开发服务器配置	object
5	plugin	放着所有webpack的插件	array	new HtmlWebpackPlugin = {xxx: xxx}	插件需要先安装并在头部引入
6	optimiaztion	优化项	object		结合插件使用

• devServer开发服务器配置

  • 功能：

    • 将项目运行在服务器中，可以添加各种配置
    • 静态资源保存后，会自动在浏览器中刷新渲染，无需手动刷新

  • 1、装包

    npm i webpack-dev-server -D
    

  • 2、webpack.config.js 选项配置

    devServer: {    //开发服务器的的配置
            port: 3000,                 // 端口号
            contentBase: './dist',      // 代理目录
            open: true,                 //自动打开刷新浏览器
            compress: true              // gzip压缩
        }
    

  • 3、packge.json 配置运行脚本

     "dev": "webpack-dev-server"
    

  • 更多配置选项教程请查看

    • 简书教程

3、webpack插件

html-webpack-plugin

• **功能：**打包生成 HTML 的插件

• 用法

1、装包
npm i html-webpack-plugin -D

2、引入构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')

3、配置 webpack.config.js 中的插件配置项
plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 需要打包的目标文件路径
            filename: 'index.html',         // 打包后的文件名
            minify: {                       //压缩配置 
                removeAttributeQuotes: true,    // 删去 html 文件中的双引号
                collapseWhitespace: true        // 折叠空行  
            },
            hash: true                      // 给静态文件引用地址添加哈希戳
        })
    ]

mini-css-extract-plugin

• **功能：**打包生成 CSS 文件的插件

• 用法

  1、装包
  npm i mini-css-extract-plugin -D
  
  2、引入构造函数
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  3、配置 webpack.config.js 中的插件配置项
  plugins: [
          new MiniCssExtractPlugin({
              filename: 'index.css',         // 打包后的文件名
          })
      ]
      
  4、放到处理规则中，替换 style-loader
  module: {
          rules: [
              {test: /\.css$/, use:[MiniCssExtractPlugin.loader, 'css-loader']}
          ]
   }
  

• 扩展

  • 默认生成的 css 文件不压缩，
  • 如果需要压缩需要引入插件 optimize-css-assets-webpack-plugin，并配置优化项 原文地址
  • 引入压缩 css 的优化项后，会照成 js 无法压缩的情况下
  • 需要再次引入插件 terser-webpack-plugin ，并配置优化项

webpack-dev-server

• **功能：**实现文件自动打包功能，并实时预览在浏览器上

• 用法：

  1、装包
  npm i webpack-dev-server -D
  
  2、配置 packge.js 中的script项
  "scripts": {
  
      "test": "echo \"Error: no test specified\" && exit 1",
  
      "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
  
      "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  
   }
   
  3、使用
  npm run dev
  npm run build
  

4、webpack loader

loader 的特点

• 希望功能单一，方便与其他 loader 合作使用

• 放在 module 中的 rules 中

• 单个 loader 用字符串，多个用[ ] ，当然也可以写成对象形式，可以添加

  {loader: 'loader-name', options: XXX}

• loader 中的默认执行顺序是从后到前

普通 loader 集合表

序号	loader	依赖	功能	匹配规则
1	style-loader		解析普通css样式	/.css$/
2	css-loader		解析css嵌套语法@import	/.css$/
3	sass-loader	node-sass	解析sass语法	/.sass$/
4	less-loader		解析less语法	/.less$/
5

复杂 loader 的使用

postcss-loader

• **功能：**能自动给 css 加上不同浏览器的前缀

• 用法

  1、装包
  npm i postcss-loader autoprefixer -D
  
  2、创建配置文件
  	在项目根目录下创建一个文件 postcss.config.js
  	module.exports = {
      plugins: [
          require('autoprefixer')
      ]
  }
  
  3、把 loader 放到处理规则中
  {test: /\.css$/, use:[
                  MiniCssExtractPlugin.loader, 
                  'css-loader',
                  'postcss-loader'
              ]}