webpack簡介與常用配置之插件

AlienZHOU 發(fā)布于2019-08-23 17:11 / 1053人閱讀

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

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

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

入口

輸出

loader

插件

模式

配置文件

項目根目錄下創(chuàng)建 webpack.config.js

運(yùn)行啟動

./node_modules/.bin/webpack

npx webpack

配置 npm 腳本

1.CopyWebpackPlugin (插件)

CopyWebpackPlugin 能夠?qū)崿F(xiàn)將某些文件或文件夾進(jìn)行拷貝

安裝

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的創(chuàng)建，以便為你的webpack包提供服務(wù)。

安裝

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 提供了一種自定義編譯期間如何報告進(jìn)度的方法。

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

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

5.DefinePlugin (插件)

DefinePlugin 能創(chuàng)建環(huán)境變量

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

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

6.開發(fā)與生產(chǎn)時的不同配置

cli 時使用 --config 選項設(shè)置不同的配置文件
// 開發(fā)

npx webpack --config webpack.config.js

// 生產(chǎn)

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, 并且具有l(wèi)ive reloading(實(shí)時重新加載) 功能。

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

8.webpack-merge 模塊

通過 webpack-merge 可以抽取出開發(fā)與生產(chǎn)環(huán)境的相同的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 進(jìn)行重寫或合并的操作。

9.別名的配置

疼點(diǎn)：
src 下面目錄結(jié)構(gòu)龐大且復(fù)雜的時候，可能引入模塊會出現(xiàn) ../../../../../../ 這種形式
那一天對文件路徑調(diào)整了一下。import 的路徑也得跟著修改一下。
定義別名規(guī)則

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 規(guī)則
  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設(shè)置

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

開發(fā)運(yùn)行 npm run sreve

構(gòu)建上線運(yùn)行 npm run build

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103951.html

發(fā)表評論

登陸后可評論

0條評論

AlienZHOU

男|高級講師

我要關(guān)注我要私信

TA的文章

#黑五#virtono：全場最低3折優(yōu)惠，標(biāo)準(zhǔn)vps首月€2.68起，大內(nèi)存vps首月€18起，大硬

閱讀 2080·2021-11-24 10:34
新晉獨(dú)角獸房企估值10億美元！品牌域名Place.com價值七位數(shù)！

閱讀 3055·2021-11-22 11:58
二十五歲零基礎(chǔ)轉(zhuǎn)行做軟件測試怎么樣？一個過來人的心路歷程送給迷茫的你

閱讀 3712·2021-09-28 09:35
CSS居中完全指南——構(gòu)建CSS居中決策樹

閱讀 1724·2019-08-30 15:53
輕松自定義一個響應(yīng)式的timeline時間線組件（橫向和縱向）

閱讀 2771·2019-08-30 14:11
如何實(shí)現(xiàn)中間大兩頭小的輪播效果

閱讀 1551·2019-08-29 17:31
30分鐘用Node.js構(gòu)建一個API服務(wù)器

閱讀 542·2019-08-26 13:53
js中深拷貝與淺拷貝（堆內(nèi)存、棧內(nèi)存的關(guān)系）

閱讀 2142·2019-08-26 13:45

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack簡介與常用配置之插件

相關(guān)文章

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

前端開發(fā)之走進(jìn)Vue.js

可視化爬蟲配置chrome插件開發(fā)之搭建vue開發(fā)環(huán)境

webpack系列之plugin及簡單的使用

前端文檔收集

發(fā)表評論

0條評論

AlienZHOU

男|高級講師

TA的文章

#黑五#virtono：全場最低3折優(yōu)惠，標(biāo)準(zhǔn)vps首月€2.68起，大內(nèi)存vps首月€18起，大硬

新晉獨(dú)角獸房企估值10億美元！品牌域名Place.com價值七位數(shù)！

二十五歲零基礎(chǔ)轉(zhuǎn)行做軟件測試怎么樣？一個過來人的心路歷程送給迷茫的你

CSS居中完全指南——構(gòu)建CSS居中決策樹

輕松自定義一個響應(yīng)式的timeline時間線組件（橫向和縱向）

如何實(shí)現(xiàn)中間大兩頭小的輪播效果

30分鐘用Node.js構(gòu)建一個API服務(wù)器

js中深拷貝與淺拷貝（堆內(nèi)存、棧內(nèi)存的關(guān)系）

最新活動