【Webpack】複製檔案+自動壓縮圖片

單純複製檔案

安裝copy-webpack-plugin套件

$ npm i copy-webpack-plugin -D

在webpack.config.js新增：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin'); //引用套件

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: './js/main.js', 
        clean: true, 
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns:[
                //from是來源路徑，to是輸出路徑
                { from: path.resolve(__dirname,'src/images/favicon') ,to: 'images/favicon' }, 
                { from: path.resolve(__dirname,'src/fonts') ,to: 'fonts' }
            ],
        }),
    ],
}

from是來源路徑，to是輸出路徑，統一使用物件方式包裹

在src底下新增images/favicon和fonts：

you project
├─── node_modules/        
├─── src/
│     │
│     ├──── fonts/ 
│     │
│     └──── images/ 
│            │
│            └── favicon/
│ 
├─── package.json
└─── webpack.config.js

在終端機執行：

$ npm run start

可以發現資料夾被複製到dist底下：

you project
├─── dist/
│     │
│     ├──── fonts/ 
│     │
│     └──── images/ 
│            │
│            └── favicon/
│
├─── node_modules/        
├─── src/
│     │
│     ├──── fonts/ 
│     │
│     └──── images/ 
│            │
│            └── favicon/
│ 
├─── package.json
└─── webpack.config.js

此時images裡的檔案(除了favicon)並不會被複製，因為沒有為該路徑進行複製

自動壓縮圖片處理

安裝image-webpack-loader套件：

$ npm i image-webpack-loader -D

在webpack.config.js新增：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


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

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: './js/main.js', 
        clean: true, 
    },
    module:{
        rules: [
            {
                test: /\.(gif|png|jpe?g|svg|webp)$/i, //找尋gif、png、jpeg、jpg、svg、webp副檔名的檔案(正規表達式)
                type: 'asset/resource', //此webpack複製檔案方法
                generator:{
                    filename: 'images/[name][ext]', //輸出的檔名跟輸入時一樣，若不設定則會自動亂數
                },
                use: [
                    {
                        loader: 'images-webpack-loader',
                        options:{
                            mozjpeg: {
                                progressive: true,
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: [0.65,0.9],
                                speed: 4,
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp:{
                                quality: 75,
                            }
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns:[
                { from: path.resolve(__dirname,'src/images/favicon') ,to: 'images/favicon' },
                { from: path.resolve(__dirname,'src/fonts') ,to: 'fonts' }
            ],
        }),
    ],
}

到main.js將圖片全部引入：

1
2
3
4


function importAll(r){
    r.keys().forEach(r);
}
importAll(require.context('../images',false,/\.(gif|png|jpe?g|svg|webp)$/i));

此時images裡的檔案會成功的複製，並且經過壓縮處理

webpack

【Webpack】複製檔案+自動壓縮圖片

copy-webpack-plugin、image-webpack-plugin

【Webpack】複製檔案+自動壓縮圖片

copy-webpack-plugin、image-webpack-plugin

單純複製檔案

自動壓縮圖片處理

其他相關