webpack簡(jiǎn)介與常用配置之插件

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

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

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

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

入口

輸出

loader

插件

模式

配置文件

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

運(yùn)行啟動(dòng)

./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 簡(jiǎn)化了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 提供了一種自定義編譯期間如何報(bào)告進(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.開(kāi)發(fā)與生產(chǎn)時(shí)的不同配置

cli 時(shí)使用 --config 選項(xiàng)設(shè)置不同的配置文件
// 開(kāi)發(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 能夠?yàn)槲覀兲峁┮粋€(gè)簡(jiǎn)單的 web server, 并且具有l(wèi)ive reloading(實(shí)時(shí)重新加載) 功能。

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

8.webpack-merge 模塊

通過(guò) webpack-merge 可以抽取出開(kāi)發(fā)與生產(chǎn)環(huán)境的相同的webapck配置。

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

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

9.別名的配置

疼點(diǎn)：
src 下面目錄結(jié)構(gòu)龐大且復(fù)雜的時(shí)候，可能引入模塊會(huì)出現(xiàn) ../../../../../../ 這種形式
那一天對(duì)文件路徑調(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"
  },

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

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

云服務(wù)器 GPU云服務(wù)器 webpack常用配置項(xiàng) 一之新功能簡(jiǎn)介 webpack cdn配置 webpack配置cdn

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103951.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AlienZHOU

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

webpack簡(jiǎn)介與常用配置之插件

相關(guān)文章

webpack4配置之分享幾個(gè)常用插件

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

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

webpack系列之plugin及簡(jiǎn)單的使用

前端文檔收集

發(fā)表評(píng)論

0條評(píng)論

AlienZHOU

男|高級(jí)講師

TA的文章

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

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

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

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

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

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

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

webpack簡(jiǎn)介與常用配置之插件

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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