創(chuàng)建局部的webpack

1. 創(chuàng)建package.json文件，用于管理項(xiàng)目的信息、庫(kù)依賴等

   npm init
   

   n 第三步：使用局部的webpack n 第四步：在package.json中創(chuàng)建scripts腳本，執(zhí)行腳本打包即可 創(chuàng)建局部的webpack npm init npm install webpack webpack-cli -D npx webpack npm run build

2. 安裝局部的webpack
   npm install webpack webpack-cli -D

3. 使用局部的webpack
   npx webpack

4. 在package.json中創(chuàng)建scripts腳本，執(zhí)行腳本打包即可

   "scripts": {
        //基本配置
        "build": "webpack"
        //可指定配置文件，即（webpack.config.js）
       "build": "webpack --config webpack.config.js"
     },
   

常用配置

const path = require('path');

// 刪除dist文件夾：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 進(jìn)行項(xiàng)目部署的時(shí)，必然也是需要有對(duì)應(yīng)的入口文件index.html；
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
// 如果我們將一些文件放到public的目錄下，那么這個(gè)目錄會(huì)被復(fù)制到dist文件夾中。
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // p可選值有：'none' | 'development' | 'production'；
  mode: 'development',
  // 設(shè)置source-map, 建立js映射文件, 方便調(diào)試代碼和錯(cuò)誤
  devtool: "source-map",

  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "build.js"
  },
  devServer: {
    
    contentBase: "./public",
    // 模塊熱替換是指在 應(yīng)用程序運(yùn)行過(guò)程中，替換、添加、刪除模塊，而無(wú)需重新刷新整個(gè)頁(yè)面；
    hot: true,
    // localhost：本質(zhì)上是一個(gè)域名，通常情況下會(huì)被解析成127.0.0.1;
    // 0.0.0.0：監(jiān)聽(tīng)I(yíng)PV4上所有的地址，再根據(jù)端口找到不同的應(yīng)用程序;
    // 比如我們監(jiān)聽(tīng) 0.0.0.0時(shí)，在同一個(gè)網(wǎng)段下的主機(jī)中，通過(guò)ip地址是可以訪問(wèn)的;
    host: "0.0.0.0",
    port: 7777,
    // open是否打開(kāi)瀏覽器：
    open: true,
    // compress是否為靜態(tài)文件開(kāi)啟gzip compression,默認(rèn)值是false
    compress: true,
    // proxy: {
    //   "/api": {
    //     // 表示的是代理到的目標(biāo)地址
    //     target: "http://localhost:8888",
    //     // 默認(rèn)情況下，我們的 /api-hy 也會(huì)被寫入到URL中，如果希望刪除，可以使用pathRewrite
    //     pathRewrite: {
    //       "^/api": ""
    //     },
    //     // 默認(rèn)情況下不接收轉(zhuǎn)發(fā)到https的服務(wù)器上，如果希望支持，可以設(shè)置為false；
    //     secure: false,
    //     // ：它表示是否更新代理后請(qǐng)求的headers中host地址
    //     changeOrigin: true
    //   }
    // }
  },
  resolve: {
    // extensions是解析到文件時(shí)自動(dòng)添加擴(kuò)展名(默認(rèn)值是 ['.wasm', '.mjs', '.js', '.json'])
    extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
    
    // 是配置別名alias：
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "js": path.resolve(__dirname, "./src/js")
    }
  },
  // module.rules中允許我們配置多個(gè)loader
  module: {
    rules: [
      {
        // test屬性：用于對(duì) resource（資源）進(jìn)行匹配的，通常會(huì)設(shè)置成正則表達(dá)式
        test: /\.(css|less)$/,
        // 1.loader語(yǔ)法糖寫法
        // loader: "css-loader"
        // 2.完整的寫法
        // 采用倒序加載使用loader(即從下往上)
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
          {
            // 這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配，比如自動(dòng)添加瀏覽器前綴、css樣式的重置
            loader: "postcss-loader",
            // 可選的屬性，值是一個(gè)字符串或者對(duì)象，值會(huì)被傳入到loader中；
            options: {
              postcssOptions: {
                plugins: [
                  require("autoprefixer")
                ]
              }
            }
          }
        ]
      },
      // {
      //   // 對(duì)字體進(jìn)行處理
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: 'file-loader',
      //     // [ext]： 處理文件的擴(kuò)展名；
      //     // [name]：處理文件的名稱
      //     // [hash]：文件的內(nèi)容，使用MD4的散列函數(shù)處理，生成的一個(gè)128位的hash值（32個(gè)十六進(jìn)制）
      //     // p [path]：文件相對(duì)于webpack配置文件的路徑；

      //     options: {
      //       name: 'fong/[name]_hash[6][ext]'
      //     }
      //   }
      // },
      // {
      //   // 對(duì)圖片進(jìn)行處理
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "url-loader",
      //     options: {
      //       // outputPath: "img",
      //       name: "img/[name]_[hash:6].[ext]",
      //       // limit，可以用于設(shè)置轉(zhuǎn)換的限制；下面的代碼38kb的圖片會(huì)進(jìn)行base64編碼，而295kb的不會(huì)；
      //       limit: 100 * 1024
      //     }
      //   }
      // },

      // 在webpack5開(kāi)始，我們可以直接使用資源模塊類型（asset module type），來(lái)替代上面的這些loader
      // 資源模塊類型(asset module type)，通過(guò)添加 4 種新的模塊類型，來(lái)替換所有這些 loader
      // 1.asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過(guò)使用 file-loader 實(shí)現(xiàn)；
      // 2.asset/inline 導(dǎo)出一個(gè)資源的 data URI。之前通過(guò)使用 url-loader 實(shí)現(xiàn)；
      // 3.asset/source 導(dǎo)出資源的源代碼。之前通過(guò)使用 raw-loader 實(shí)現(xiàn)；
      // 4.asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。之前通過(guò)使用 url-loader，并且配置資源體積限制實(shí)現(xiàn)
      {
        // 對(duì)圖片進(jìn)行處理
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset',
        generator: {
          filename: "img/[name]_[hash:6].[ext]",
          // 添加一個(gè)parser屬性，并且制定dataUrl的條件，添加maxSize屬性；
          // parser: {
          //   dataUrlCondition: {
          //     maxSize: 100 * 1024
          //   }
          // }
        }
      },
      {
        // 對(duì)字體進(jìn)行處理
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]",
          // limit: 100 * 1024
        }
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      }
    ]
  },
  // Loader是用于特定的模塊類型進(jìn)行轉(zhuǎn)換；
  // Plugin可以用于執(zhí)行更加廣泛的任務(wù)，比如打包優(yōu)化、資源管理、環(huán)境變量注入等；
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title：在進(jìn)行htmlWebpackPlugin.options.title讀取時(shí)，就會(huì)讀到該信息
      title: 'webpack案例',
      // template：指定我們要使用的模塊所在的路徑；
      template: './public/index.html'
    }),
    // DefinePlugin允許在編譯時(shí)創(chuàng)建配置的全局常量，是一個(gè)webpack內(nèi)置的插件（不需要單獨(dú)安裝)
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      // 復(fù)制的規(guī)則在patterns中設(shè)置；
      // from：設(shè)置從哪一個(gè)源中開(kāi)始復(fù)制；
      // to：復(fù)制到的位置，可以省略，會(huì)默認(rèn)復(fù)制到打包的目錄下；
      // globOptions：設(shè)置一些額外的選項(xiàng)，其中可以編寫需要忽略的文件：
      //  .DS_Store：mac目錄下回自動(dòng)生成的一個(gè)文件；
      //  index.html：也不需要復(fù)制，因?yàn)槲覀円呀?jīng)通過(guò)HtmlWebpackPlugin完成了index.html的生成；
      patterns: [
        {
          from: 'public',
          globOptions: {
            ignore: [
              '**/.DS_Store',
              '**/index.html',
            ]
          }
        }
      ]
    })
  ]
}