1. Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。

   ---

   從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉換成一個靜態(tài)文件，減少了頁面的請求。

   創(chuàng)新互聯(lián)于2013年開始，先為昌圖等服務建站，昌圖等地企業(yè)，進行企業(yè)商務咨詢服務。為昌圖企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。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

  編寫規(guī)則

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

  image
• webpack 5 中，可以使用內(nèi)置的 Asset Modules
• 編寫規(guī)則

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

  加載字體
• webpack 5 中，可以使用內(nèi)置的 Asset Modules
• 加載數(shù)據(jù)
• 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

  編寫規(guī)則

•    {
                 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");

  優(yōu)化配置

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

  開發(fā)環(huán)境
• 開發(fā)環(huán)境??mode:"development"
• source map??代碼映射??devtool: 'inline-source-map',
• 開發(fā)工具??webpack-dev-server?

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

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

你是否還在尋找穩(wěn)定的海外服務器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準確流量調度確保服務器高可用性，企業(yè)級服務器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧