什么是webpack?

1. Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

   ---

   从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

   创新互联于2013年开始，先为昌图等服务建站，昌图等地企业，进行企业商务咨询服务。为昌图企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。Webpack安装

2. npm install -g webpack webpack-cli

• 配置文件

• package.json同级目录新建webpack.config.js

  基本配置

• 入口  entry   "./src/index.js"
  
  
  出口 output  filename  "main.js"
  
  	path  const path=require("path")  path.resolve(__dirname, "dist")
  
  	clean:true 自动清理历史残留

  解析路径

• resolve
  	      配置  resolve:{
  
          alias:{
  
              "@":path.resolve(__dirname, "src")
  
          }
  
      }
  	      导入   import { createButton } from "@/utils/createbutton";

  npm 自定义指令

• npm run build
  
  npm webpack

  资源加载
• webpack默认只能加载js和json资源
• 其他资源类型（img/css/vue）需要安装加载器loader
• css 加载器安装

• npm install --save-dev style-loader css-loader

  编写规则

• module: {
          rules: [
              {
                  test: /\.css$/i,
                  use: ['style-loader', 'css-loader'],
              },
          ],

  image
• webpack 5 中，可以使用内置的 Asset Modules
• 编写规则

• {
                  test: /\.(png|svg|jpg|jpeg|gif)$/i,
                  type: 'asset/resource',
              },

  加载字体
• webpack 5 中，可以使用内置的 Asset Modules
• 加载数据
• json 默认支持
• csv

• npm install --save-dev csv-loader
  
  配置   {
            test: /\.(csv|tsv)$/i,
            use: ['csv-loader'],
          },

  xml

• npm install --save-dev xml-loader
  
  配置  {
           test: /\.xml$/i,
           use: ['xml-loader'],
              },

  less加载器

• npm install less less-loader --save-dev

  编写规则

•    {
                 test: /\.less$/i,
                  use: [
                      // compiles Less to CSS
                      'style-loader',
                      'css-loader',
                      'less-loader',
                  ],
              },

  插件
• HtmlWebpackPlugin
• html5自动生成并引入bundle包 
• 安装

  npm install --save-dev html-webpack-plugin

  配置

  const HtmlWebpackPlugin = require('html-webpack-plugin');

  plugins: [new HtmlWebpackPlugin()],

  MiniCssExtractPlugin
• 将css从js中剥离 减少js文件大小
• 安装

• npm install --save-dev mini-css-extract-plugin

  配置

• plugins: [new MiniCssExtractPlugin()],

  use: [MiniCssExtractPlugin.loader, "css-loader"],

  CssMinimizerWebpackPlugin
• 将css压缩
• 安装

• npm install css-minimizer-webpack-plugin --save-dev

  配置

• optimization: {
        minimizer: [
              new CssMinimizerPlugin(),
          ],
  
      },

  TerserWebpackPlugin
• webpack5 自带不需要安装  将html压缩
• 配置

• const TerserPlugin = require("terser-webpack-plugin");

  优化配置

• optimization: {
      minimize: true,
      minimizer: [new TerserPlugin()],
    },

  开发环境
• 开发环境  mode:"development"
• source map  代码映射  devtool: 'inline-source-map',
• 开发工具  webpack-dev-server 

• npm install --save-dev webpack-dev-server

  devServer:{
  
          open:true,
  
          host:"192.168.0.10",
  
          port:9090
  
      }

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

新闻名称：隔壁王老二每天学这篇webpack，半年后，无数女人为之芳心-创新互联
标题来源：http://mbwzsj.com/article/cdjooi.html