webpack5：01.基础配置

初始化

npm init -y

安装webpack、webpack-cli

npm i webpack webpack-cli -D

创建文件

hello-world.js

function helloWorld() {
    console.log('hello world');
}
export default helloWorld

index.js

import helloWorld from './hello-world'
helloWorld()

查看当前路径

运行

因为这里不是全局安装，所以不能直接使用 webpack 的命令 但是可以使用 npx 这个命令 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装

查看 webpack 的版本

node_modules/.bin/webpack -v
# or npx webpack -v

在当前项目目录下运行webpack

node_modules/.bin/webpack
# or npx webpack

现在已经生成了打包后的文件

webpack —stats detailed 查看打包信息 webpack —help 查看相关命令

上面的意思就是 运行 webpack 的时候设置入口 设置开发模式

文件配置

一些webpack的参数在 webpack.config.js 中进行配置

const path = require('path')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出路径
    output: {
        // 输出路径文件名称
        filename: 'bundle.js',
        // 输出路径出口路径  __dirname当前文件目录
        path: path.resolve(__dirname,'./dist')
    },
    // 模式 开发模式 or 生产模式
    mode:'none'
}

插件

插件列表：https://webpack.docschina.org/plugins/

通俗点在webpack中，提供额外功能的东西就叫做插件

HtmlWebpackPlugin

这个插件可以复制一份html文件并引入打包的资源
安装

npm i html-webpack-plugin -D

引入使用
单独 new HtmlWebpackPlugin() 会自动生成一个html文件，进行配置后会使用你设置的模板

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        // 打包文件名称
        filename: 'bundle.js',
        // 打包出口路径  __dirname当前文件目录
        path: path.resolve(__dirname,'./dist')
    },
    // 模式 开发模式 or 生产模式
    mode:'none',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'app.name',
            inject: 'body'
        })
    ]
}

清除dist

在 output 中设置 clean: true 就可以了

mode选项

有两个选项 development 和 production

source map

因为打包后的js文件不易阅读，报错话不能定位到原来位置，需要进行设置 devtool: ‘inline-source-map’

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        // 打包文件名称
        filename: 'bundle.js',
        // 打包出口路径  __dirname当前文件目录
        path: path.resolve(__dirname,'./dist'),
        // 每次打包清除 dist 文件夹的内容
        clean: true
    },
    // 模式 开发模式 or 生产模式
    mode:'development',
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'app.html',
            inject: 'body'
        })
    ]
}

使用watch mode

webpack-dev-server

这个插件可以实时加载页面

npm i webpack-dev-server -D

配置

devServer: {
    static: './dist'
}

启动

npx webpack-dev-server

资源模块

webpack5 中使用了资源模块（asset modules）来引入各种类型的资源

resource 资源

resource 会发送一个单独的文件并导出URL

generator 和 assetModuleFilename 控制了打包后的资源文件夹和文件名，不过generator 的优先级更高

contentbash：生成哈希 ext：原始后缀

生成10位hash

inline 资源

inline 资源用于导出一个资源的 Data URL，如svg文件

source 资源

用于导出资源的源代码

module: {
    rules: [
        {
            test: /\.png$/,
            type: 'asset/resource',
            generator: {
                filename: 'image/[hash:10][ext]'
            }
        },
        {
            test: /\.svg/,
            type: 'asset/inline'
        },
        {
            test: /\.txt/,
            type: 'asset/source'
        }
    ]
}

asset 资源

会在导出一个Data URL 与发送一个 文件之间自动进行选择

 module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'image/[hash:10][ext]'
        }
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      },
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024 // 大于 4M 的不进行处理，小于 4M转成base64
          }
        }
      }
    ]
  }
}

Loader

webpack本身只能理解js和json，其他类型的文件（css、less…）就需要loader来解析

加载css

解析css安装两个loader，按顺序从右往左执行

npm i css-loader style-laoder -D

 module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
          'css-loader'
        ]
      },
    ]
 }

解析less 需要安装如下loader

npm i less-loader less -D

            {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成 css文件
          'less-loader'
        ]
      },

css 和 less 写在一起

{
        test: /\.(css|less$)/,
        use: ['style-loader','css-loader','less-loader']
      }

抽离和压缩css

抽离css需要安装以下插件 mini-css-extract-plugin
安装

npm i mini-css-extract-plugin -D

使用

设置导出路径和名称

压缩
安装

npm i css-minimizer-webpack-plugin -D

使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css代码压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // 打包文件名称
    filename: 'bundle.js',
    // 打包出口路径  __dirname当前文件目录
    path: path.resolve(__dirname, './dist'),
    // 每次打包清除 dist 文件夹的内容
    clean: true
  },
  // 模式 开发模式 or 生产模式
  mode: 'production',
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      inject: 'body'
    }),
    new MiniCssExtractPlugin({
      filename: 'styles/[contenthash].css'
    })
  ],
  devServer: {
    static: './dist'
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'image/[hash:10][ext]'
        }
      },
      {
        test: /\.svg/,
        type: 'asset/inline'
      },
      {
        test: /\.txt/,
        type: 'asset/source'
      },
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024 // 大于 4M 的不进行处理，小于 4M转成base64
          }
        }
      },
      {
        test: /\.(css|less$)/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  },
  // 优化配置
  optimization: {
      minimizer: [
          new CssMinimizerPlugin()
      ]
  }
}

处理字体

{
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },

加载数据

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csvloader 和 xml-loader。让我们处理加载这三类文件：

npm i csv-loader xml-loader -D

{
    test: /\.(csv|tsv)$/,
    use: 'csv-loader'
},
{
    test: /\.xml$/,
    use: 'xml-loader'
}

自定义JSON模块parser

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml 、 yaml 或 json5 文件作为 JSON 模块导入。

npm i toml yaml json5 -D

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

babel-loader

把 es6 的代码转化成 es5

npm install -D babel-loader @babel/core @babel/preset-env