webpack学习-1

1.webpack

1 webpack5 安装与配置

1.1 全局安装 npm i webpack webpack-cli -g

1.2 查看版本 npx webpack -v

1.3 打包 npx webpack

1.4 打包并显示详细过程 npx webpack --stats detailed

1.5 查看指定webpack配置 npx webpack --help

1.6 设置入口文件（mode:production）npx webpack --entry ./src/index.js

1.7 创建webpack.config.js并基础配置

const path = require('path');
module.exports = {
  module.exports ={
    entry: './src/index.js',

    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './dist')
    },

    mode: 'node'
  }
}

1.8 文件目录

2 path.join( ) 与 path.resolve( ) 的区别

path.join( )：拼接路径，保持路径之间只有一个“ / ”；

path.resolve( ): 参数从右往左读取并拼接，一旦遇到绝对路径就停止拼接（以“/”或盘符为开头的路径，就会被认作是绝对路径），保证返回一个绝对路径。

3 插件

3.1 官方网站：webpack.org/plugins

Community 社区插件

Webpack 官方插件

Webpack Contrib webpack官方插件

3.2 安装和使用html-webpack-plugin插件

安装：npm i html-webpack-plugin -D

使用：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	plugin: [
    new HtmlWebpackPlugin({
      // html模板文件
      template: './index.html',
      // 打包生成的html文件名
      filename: 'app.html',
      // script标签的位置
      inject: 'body'
    })
  ]
}

3.2 打包前清理dist文件夹

module.exports = {
  output: {
    clean: true,
  }
}

4 mode

4.1 调试环境模式

development：开发环境

production：生产环境

none：无

4.2 编译方式

在dist/bundle.js文件中，通过eval把压缩成字符串的js代码进行编译

5 devtool

source maps功能，能把编译前的文件映射到浏览器中，更方便快捷找到对应的错误代码行数。

module.exports = {
  devtool: 'inline-source-map'
}

6 watch mode

6.1 使用：npx webpack --watch

6.2 功能：每次修改文件后保存，都会触发重新编译打包

7 webpack-dev-server

7.1 安装： npm i webpack-dev-server -D

7.2 配置：

module.exports = {
  devServer: {
    // 将dist目录下的文件作为web服务器的根目录
    static: './dist'
  }
}

7.3 使用：npx webpack-dev-server

7.4 注意点：

开启了Hot Module热更新模块

开启了Live Reloading实时加载

不会生成物理的dist打包文件，而是在内存中保留了编译文件，查看本地最新打包文件仍需npx webpack

8 资源模块

8.1 资源模块类型

asset/resource 发送一个单独的文件并导出对应的URL

asset/inline 会导出一个资源的DataURL

asset/source 会导出资源的源代码

asset 依据资源文件大小，在resource和inline之间自动选择

8.2 resource资源

module.exports = {
  rules: [
    {
      test: /.png$/,
      type: 'asset/resource'
    }
  ],
  output: {
    // resource资源存放路径，contenthash文件内容生成的hash值，ext扩展名
    assetModuleFilename: 'images/[conetenthash][ext]'
  },
  // 和assetModuleFilename功能一样，但generator优先级更高
  generator: {
    filename: 'images/[contenthash][ext]'
  }
}

import imgsrc from './assets/img1.png';
const img = document.createElement('img');
img.src = imgsrc;
document.body.appendChild(img);

8.2 inline资源

module.exports = {
  rules: [
    {
      test: /.svg$/,
      type: 'asset/inline'
    }
  ],
}

import logoSrc from './assets/webpack_logo.svg'
const img2 = document.createElement('img');
img2.src = logoSrc;
img2.style.cssText = 'width:200px; height:200px';
document.body.appendChild(img2);

8.3 source资源

module.exports = {
  rules: [
    {
      test: /.txt$/,
      type: 'asset/source'
    }
  ],
}

import exampleTxt from './assets/example.txt';
const block = document.createElement('div');
block.style.cssText = 'width: 200px; height: 200px';
document.body.appendChild('block');

8.4 asset 通用资源

module.exports = {
  rules: [
    {
      test: /.jpg$/,
      type: 'asset',
      parse: {
        // 不超过4M，都会被编译成inline资源-base64
        // 默认是不超过8k
        dataUrlCondition: {
          maxSize: 4 * 1024 * 1024;
        }
      }
    }
  ],
}

9 样式文件加载

9.1 说明：让webpack能够解析除js和json以外其它文件的类型

9.2 安装：npm i css-loader style-loader less-loader -D

npm mini-css-extract-plugin css-minimizerPlugin -D

9.3 使用

module.exports = {
  rules: [
    {
      test: /.css$/,
      // 逆序读取，先打包，再通过内联方式插入style标签，引入几个样式文件就有几个style标签
      use: ['style-loader', 'css-loader']
    }
  ],
}

module.exports = {
  rules: [
    {
      test: /.css$/,
      // 逆序读取，先把less编译为css打包
      use: ['style-loader', 'css-loader', 'less-loader']
    }
  ],
}

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style/[contenthash].css'
    })
  ]
  rules: [
    {
      test: /.(css|less)$/,
      // 逆序读取， 最后把多个样式文件合并为一个main.css文件
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }
  ],
}

import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
module.exports = {
  mode: 'production',
  // 放优化的插件，在生产环境中才会生效
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
}

10 图片文件加载（在css中）

.block-bg{
  background-image: url('./assets/webpack_logo.png');
}

block.classList.add('block-bg');

11 字体文件加载

module.exports = {
  rules: [
    {
      test: /.(woff|woff2|eot|ttf|otf)$/,
      type: 'asset/resource'
    }
  ],
}

@font-face {
  font-family: 'iconfont';
  src: url('./assers/Mefstruture.ttf');
}
.icon {
  font-family: 'iconfont';
  font-size: 30px;
}

const spanEle = document.createElement('span');
spanEle.innerHTML = 'iconfont';
spanEle.classList.add('icon');
document.body.appendChild(spanEle);

12 加载数据文件(json, csv, tsv, xml等)

12.1 安装插件 npm i csv-loader xml-loader -D

12.2 使用

module.exports = {
  rules: [
    {
      test: /.(csv|tsv)$/,
      use: 'csv-loader'
    },
		{
      test: /.xml$/,
      use: 'xml-loader'
    },
  ],
}

<? xml version="1.0" encoding="UTF-8" ?>
<node>
  <to>Mary</to>
  <to>Mike</to>
  <from>John</from>
  <heading>reminder</heading>
  <body>Call Cind on Tuesday</body>
</node>

to, from, heading, body
Mary, John, Reminder, Call Cindy on Thuesday
Zoe, Bill, Reminder, Buy orange juice,
Antumn, Lindsey, Letter, I miss you

import Data from './assets/data.xml';
import Notes from './assets/data.csv';
console.log(Data); //对象
console.log(Notes); //数组

13 加载数据文件(yaml, toml, json5等)

13.1 安装 npm i toml yaml json5 -D

13.2 使用

title = "TOML Example"
# 2层
[ownerA]
name = "Tom Preston-Werner"
organization = "Github"
bio = "Github Cofounder $ CEO\nLikes tater tots and beer."
dob = "1979-05-27T07:32:00.000Z"

# 多层
[ownerB.a]
name = "Tom Preston-Werner"
organization = "Github"
bio = "Github Cofounder $ CEO\nLikes tater tots and beer."
dob = "1979-05-27T07:32:00.000Z"
[ownerB.b]
bio = "Github Cofounder $ CEO\nLikes tater tots and beer."
dob = "1979-05-27T07:32:00.000Z"

# 数组
[[ownerC]]
name = "Tom Preston-Werner"
organization = "Github"
[[ownerC]]
bio = "Github Cofounder $ CEO\nLikes tater tots and beer."
dob = "1979-05-27T07:32:00.000Z"

title: YAML Example
# 2层
owmnerA:
name: Tom Preston-Werner
organization: Github
bio: |-
Github Cofounder $ CEO
Likes tater tots and beer.
dob: 1979-05-27T07:32:00.000Z

# 多层
ownerB:
name:
username: 张三
# 数组

ownerC:
- a: 1
b: 2
- a: 3
b: 4

{
  title: "JSON5 Example",
  ownerA: {
  name: "Tom Preston-Werner",
  organization: "Github",
  bio: "Github Cofounder & CEO\n\
  Likes tater tots and beer",
  dob: "1979-05-27T07:32:00.000Z",
},
ownerB: ["Tom Preston-Werner", "Github"],
}

const toml = require('toml');
const yaml = require('yaml');
const json5 = require('json5');

module.exports = {
  rules: [
    {
      test: /.toml$/,
      type: 'json',
      parser: {
        parse: toml.parse,
      }
    },
    {
      test: /.yaml$/,
      type:'json',
      parser:{
        parse: yaml.parse,
      }
		},
		{
      test: /.json5$/,
      type:'json',
      parser:{
        parse: json5.parse,
      }
		},
  ],
}

import toml from './assets/data.toml';
import yaml from './assets/data.yaml';
import json5 from './assets/data.json5';
console.log(toml);
console.log(yaml);
console.log(json5);