技術標籤：webpack

文章目錄

• • • • 一、webpack-核心概念-plugins
      • • 1. 應用場景
        • 2. 具體場景
        • • 1. 配置html-webpack-plugin
          • 2. 配置copy-webpack-plugin
          • 3. 配置clean-webpack-plugin

一、webpack-核心概念-plugins

1. 應用場景

• 一般用於需要在打包節點上做一些額外的事情，且loader完成不了的事。

2. 具體場景

1. 配置html-webpack-plugin

html-webpack-plugin：主要有兩個作用

• 為html檔案中引入的外部資源如script、link動態新增每次compile後的hash，防止引用快取的外部檔案問題
• 可以生成建立html入口檔案

安裝：

npm i html-webpack-plugin --save-dev

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'index.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

配置模板：

// 使用/src/index.html下面的index.html作為模版生成一個新的index.html
new HtmlWebpackPlugin({
    template: './src/index.html'
})

2. 配置copy-webpack-plugin

copy-webpack-plugin 的作用就是拷貝檔案，或者資料夾。

安裝：

npm install copy-webpack-plugin --save-dev

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin =
 
 require('copy-webpack-plugin');
const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CopyPlugin({
            patterns: [
                { from: path.join(__dirname, './src/static'),to: 'static'}
            ],
        })
    ]
}

3. 配置clean-webpack-plugin

clean-webpack-plugin的作用是自動刪除打包資料夾

安裝：

npm install clean-webpack-plugin -D

配置：

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'index.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
    ]
}