webpack安裝配置+常見使用過程（結合vue）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/05/31/13022244.html
-Advertisement-
Play Games

webpack介紹和安裝 webpack：前端模塊化打包工具 安裝webpack需要安裝Node.js，Node.js自帶軟體包管理工具npm 查看自己的node版本： node -v 全局安裝webpack cnpm install webpack -g 查看webpack版本 webpack - ...


webpack介紹和安裝

webpack：前端模塊化打包工具

安裝webpack需要安裝Node.js，Node.js自帶軟體包管理工具npm

查看自己的node版本：

node -v

 

全局安裝webpack

cnpm install webpack -g

 

查看webpack版本

webpack --version

 

局部安裝webpack

cnpm install webpack --save-dev

 

為什麼全局安裝之後還需要局部安裝？

在終端直接執行webpack，使用的是全局webpack

如果在package.json中定義了script，其中包含了webpack命令，那麼使用的是局部webpack

 

webpack基本使用過程

小案例：創建一個webpack目錄，在裡面創建dist目錄和src目錄

在src目錄中創建mathUtils.js和main.js

mathUtils.js

function add(num1, num2){
    return num1 + num2;
}

function mul(num1, num2){
    return num1 * num2;
}

module.exports = {
    add, mul
}

main.js

const {add, mul} = require('./mathUtils.js');

console.log(add(2, 3));
console.log(mul(4, 5));

使用webpack將兩個js打包

webpack ./src/main.js ./dist/bundle.js

報錯：

ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve './dist/bundle.js' in 'C:\Users\96579\Desktop\webpack'

原因：我的版本是最新的webpack，所以有些命令不一樣了

將以上代碼修改為：

webpack ./src/main.js -o ./dist/bundle.js

（多了個 -o ）

 

dist目錄下成功生成bundle.js

 

 

webpack.config.js配置和package.json配置

實現：將入口文件和出口文件放置到配置文件中，打包時直接使用簡寫webpack

 

npm init

 

 在webpack目錄中生成了package.json

 

 然後輸入以下代碼，如果在package.json中有一些依賴的包，會自動安裝好

cnpm install

 

 然後在webpack目錄中創建webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

output中的path要求輸入絕對路徑，path.resolve用來拼接路徑，__dirname獲取當前項目的絕對路徑

接下來就可以使用webpack來進行打包，不再需要在打包時再加上入口文件和輸出文件

 

 

 

 

實現：將webpack映射到npm run build

修改package.json，加入映射

 

最新版的寫法是：

    "dev": "webpack --mode deveplopment",
    "build": "webpack --mode production"

這樣的話，webpack執行時預設會先找本地的webpack，再去找全局的webpack

通常項目中，除了安裝全局的webpack，每個項目也會有獨立的webpack，而剛纔我們只安裝了全局webpack，因此現在來安裝下局部的

並且這個webpack包是開發時的依賴，因此加上--save-dev

cnpm install webpack --save-dev

知識點：只要是在命令行輸入webpack，預設都是找的全局。如果是在package.json中添加的映射，預設是找的本地

 

webpack中使用css文件的配置

安裝style-loader和css-loader

cnpm install style-loader --save-dev
cnpm install --save-dev css-loader

配置webpack.config.js

 

 代碼：

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

 

webpack-less文件的處理

安裝less-loader

cnpm install --save-dev less-loader less

配置

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

代碼如下

 

 

webpack-圖片文件的處理

安裝url-loader

cnpm install --save-dev url-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

【實際開發過程中，一般建議把limit設置成8kb】

註意，當圖片大於limit中設置的尺寸時，需要安裝file-loader

cnpm install file-loader --save-dev

webpack會把打包好的文件放到dist目錄中，需要在webpack.config.js中使用publicPath指定文件的路徑

 

 

然後再運行

npm run build

 

webpack-ES6轉ES5的babel

安裝

cnpm install [email protected] @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

 

webpack設置vue的配置過程

引入vue.js

cnpm install vue --save

使用vue進行開發測試

main.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'webpack & vue'
  }
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{message}}</h2>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

使用完整版本，修改配置

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

安裝vue-loader和vue-template-compiler

cnpm install -D vue-loader vue-template-compiler

webpack配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

 

webpack-橫幅plugin的使用

配置webpack.config.js

const webpack = require('webpack')
...
plugins: [
    new webpack.BannerPlugin('最終版權歸cyy所有')
  ],

npm run build之後，查看dist目錄下的bundle.js

 

 

webpack-HtmlWebpackPlugin的使用

打包html的plugin

cnpm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
  plugins: [
    new HtmlWebpackPlugin(),
  ],

運行npm run build，會在dist目錄中生成index.html

 

 

webpack-UglifyjsWebpackPlugin的使用

幫助壓縮js

cnpm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

不過現在新版本預設生成的bundle.js好像就是壓縮過的

 

webpack-dev-server搭建本地伺服器

每次改變代碼後，進行npm run build打包，開發效率比較低

webpack提供了一個可選的本地伺服器，基於node.js，使用express框架，可以讓瀏覽器實時刷新修改後的效果

cnpm install --save-dev webpack-dev-server

webpack.config.js

 

 package.json

 

 

npm run start 開啟服務

瀏覽器自動調用localhost:8080

修改代碼，不用再重覆代碼，已經可以看到瀏覽器的內容實時更新了

 

webpack配置文件的分離

在webpack目錄下創建build目錄，放入3個配置的js文件

cnpm install webpack-merge --save-dev

開發時環境 dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

//開發時
module.exports = (baseConfig, {
  devServer: {
    contentBase: "./dist",
  },
});

生產時環境 prod.config.js

const webpackMerge = require("webpack-merge");
const baseConfig = require("./base.config");
//生產時
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = (baseConfig, {
  plugins: [new UglifyJsPlugin()],
});

公共環境 base.config.js

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              //   limit小於8192時，使用base64格式
              //   Limit大於8192時，需要額外安裝file-loader
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最終版權歸cyy所有"),
    new HtmlWebpackPlugin(),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js", // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    },
  },
};

刪除原先項目目錄下的webpack.config.js

修改package.json指定配置文件

 

 

此時打包後的文件會在build目錄下的dist目錄中，如果還是想生成到項目目錄下的dist目錄中，就需要修改base.config.js中的路徑

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 10 個提高效率的 Linux 命令別名
    在 Linux 環境下工作的工程師，一定會對那些繁瑣的指令和參數命令行印象深刻吧。而且，可怕的不是繁瑣，而是需要大量重覆輸入這些繁瑣的命令。 在 Linux 下我們有個別名命令 alias ，可以將那些繁瑣的命令自定義為我們容易記住的別名，可以大大提高我們的效率。 但是，alias 命令只對當前終端 ...
  • 【原創】Linux中斷子系統（一）-中斷控制器及驅動分析
    背景 Read the fucking source code! --By 魯迅 A picture is worth a thousand words. --By 高爾基 說明： Kernel版本：4.14 ARM64處理器，Contex-A53，雙核 使用工具：Source Insight 3. ...
  • Redis入門(5) - 消息通知
    使用列表實現任務隊列 優先順序隊列 按照規則訂閱 Redis也可以作為任務隊列。任務隊列顧名思義，就是“傳遞任務的隊列”。任務隊列與消息隊列什麼區別呢？任務隊列是邏輯模型，而消息隊列是通信模型，兩者是不同層次的抽象，用消息隊列可以實現任務隊列。 與任務隊列進行交互的實體有兩類，一類是生產者（produ ...
  • redis基本操作 —— string
    一、設置指定key的值 命令：set 格式：set key value 127.0.0.1:6379> set test_key test_value OK 二、獲取指定key的值 命令：get 格式：get key 127.0.0.1:6379> get test_key "test_value" ...
  • Elasticsearch kibana官方基礎本地實踐
    Elasticsearch kibana學習本地測試,數據處理分析 ...
  • redis —— linux下源碼安裝
    一、下載redis源碼，此處以redis 5.0.7為例 wget http://download.redis.io/releases/redis-5.0.7.tar.gz 二、解壓 tar -xf redis-5.0.7.tar.gz 三、編譯 cd redis-5.0.7/ make 四、啟動 ...
  • 第4課 Senparc.Weixin SDK Sample 介紹
    瞭解的Senparc.Weixin SDK 基礎功能，瞭解Sample的項目架構 ...
  • Vue 新增不參與打包的介面地址配置文件
    Vue 新增不參與打包的介面地址配置文件 by:授客 QQ：1033553122 開發環境 Win 10 Vue 2.5.2 問題描述 vue工程項目，npm run build webpack方式打包，每次打包後如果需要更改後臺介面地址（項目中，介面地址設置成變數，存放在js文件中，需要用到的地方 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類