webpack簡介與常用配置之插件

AlienZHOU 發布于2019-08-23 17:11 / 1068人閱讀

摘要：安裝插件能幫忙每次打包之前先刪除文件夾。安裝插件提供了一種自定義編譯期間如何報告進度的方法。插件能創建環境變量開發與生產時的不同配置時使用選項設置不同的配置文件開發生產能夠為我們提供一個簡單的并且具有實時重新加載功能。

寫在前面，近期有想法整理一下前端工程化相關的知識，就先從打包工具開始吧；今天帶來的是webpack相關的一些常用插件配置，后期有時間話，也會出一些比較輕量級的打包工具的配置 gulp, rullup...相對于webpack學習成本更低一些

介紹 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個依賴圖(dependency graph)，此依賴圖會映射項目所需的每個模塊，并生成一個或多個 bundle 概念

入口

輸出

loader

插件

模式

配置文件

項目根目錄下創建 webpack.config.js

運行啟動

./node_modules/.bin/webpack

npx webpack

配置 npm 腳本

1.CopyWebpackPlugin (插件)

CopyWebpackPlugin 能夠實現將某些文件或文件夾進行拷貝

安裝

npm install --save-dev copy-webpack-plugin
webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: "source", to: "dist" },
    ]),
  ],
};

2.HtmlWebpackPlugin (插件)

HtmlWebpackPlugin 簡化了html的創建，以便為你的webpack包提供服務。

安裝

npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

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

3.CleanWebpackPlugin (插件)

CleanWebpackPlugin 能幫忙每次打包之前先刪除dist文件夾。

安裝

npm install --save-dev clean-webpack-plugin
webpack.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");

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

4.ProgressPlugin (插件)

ProgressPlugin 提供了一種自定義編譯期間如何報告進度的方法。

webpack.config.js
const { ProgressPlugin } = require("webpack");

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

5.DefinePlugin (插件)

DefinePlugin 能創建環境變量

webpack.config.js
const { DefinePlugin } = require("webpack");

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

6.開發與生產時的不同配置

cli 時使用 --config 選項設置不同的配置文件
// 開發

npx webpack --config webpack.config.js

// 生產

npx webpack --config webpack.config.prod.js

"scripts": {
  "dev": "webpack --config webpack.config.js",
  "build": "webpack --config webpac.config.prod.js"
},

7.webpack-dev-server

webpack-dev-server 能夠為我們提供一個簡單的 web server, 并且具有live reloading(實時重新加載) 功能。

安裝
npm install --save-dev webpack-dev-server
使用
開發時，將 webpack 命令修改為 webpack-dev-server 命令。

8.webpack-merge 模塊

通過 webpack-merge 可以抽取出開發與生產環境的相同的webapck配置。

安裝
npm install --save-dev webpack-merge
寫一個 webpack.config.base.js 并在這個文件中寫入基本的webpack配置

在 webpack.config.dev.js 與 webpack.config.prod.js 中引入 webpack.config.base.js 然后使用 webpack-merge 進行重寫或合并的操作。

9.別名的配置

疼點：
src 下面目錄結構龐大且復雜的時候，可能引入模塊會出現 ../../../../../../ 這種形式
那一天對文件路徑調整了一下。import 的路徑也得跟著修改一下。
定義別名規則

module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
}

最后，完整配置如下

webpack.config.base.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const { ProgressPlugin } = require("webpack");

module.exports = {
  // 1. 入口
  entry: "./src/index.js",
  // 2. 出口
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  // 3. loader 規則
  module: {
    rules: [
      { test: /.js$/, use: "babel-loader" }
    ]
  },
  // 4. 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html")
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "./public"),
        to: path.resolve(__dirname, "./dist")
      },
    ]),
    new CleanWebpackPlugin(),
    new ProgressPlugin(),
  ]
}

webpack.config.dev.js

   const merge = require("webpack-merge");
    const { DefinePlugin } = require("webpack");
    const baseConfig = require("./webpack.config.base");
    
    module.exports = merge(baseConfig, {
      plugins: [
        new DefinePlugin({
          "process.env": {
            "NODE_ENV": ""development""
          }
        })
      ],

  mode: "development",
  devServer: {
    contentBase: "/dist",
  }
})

webpack.config.prod.js

  const merge = require("webpack-merge");
const { DefinePlugin } = require("webpack");
const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  plugins: [
    new DefinePlugin({
      "process.env": {
        "NODE_ENV": ""production""
      }
    })
  ],
  mode: "production"
})

package.josn script設置

 "scripts": {
    "serve": "webpack-dev-server --open --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },

開發運行 npm run sreve

構建上線運行 npm run build

GPU云服務器云服務器 webpack常用配置項一之新功能簡介 webpack cdn配置 webpack配置cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103951.html

webpack4配置之分享幾個常用插件

摘要：去做想做的事，去愛值得的人去成為自己喜歡的模樣，去讓自己發光渾身充滿力量，充實的日子最美好各位早安，這里是平頭哥聯盟，我是首席填坑官蘇南，用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　繼上一次webpack的基礎配置分享之后，本次將分享一些工作中項目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 評論0 收藏0
前端開發之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0
可視化爬蟲配置chrome插件開發之搭建vue開發環境

摘要：使用開發插件的好處本次開發的插件是抓取配置插件，有很多的表單以及彈出層，如果純使用的話會有很多動態創建的操作。使用和的語法以及的加載器相配合，可以減少大量動態創建的代碼。使用vue開發chrome插件的好處本次開發的插件是抓取配置插件，有很多的form表單以及彈出層，如果純使用js的話會有很多動態創建dom的操作。使用vue和ES6的import語法以及webpack的html加載...

impig33 2019-08-16 13:25 評論0 收藏0
webpack系列之plugin及簡單的使用

摘要：系列之及簡單的使用一有什么用是核心功能，通過插件可以實現所不能完成的復雜功能，使用豐富的自定義，可以控制編譯流程的每個環節，實現對的自定義功能擴展。三使用在配置文件中，向屬性傳入實例即可。 webpack系列之plugin及簡單的使用一.plugin有什么用 plugin是webpack核心功能，通過plugin（插件）webpack可以實現loader所不能完成的復雜功能，使用p...

TesterHome 2019-08-22 16:39 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0