webpack搭建vue3教程-高級篇

webpack搭建vue3教程-高級篇

一.配置ES6轉ES5：解決瀏覽器不支持ES6

1.安裝依賴：

npm install @babel/core babel-loader @babel/preset-env -D

2.配置es6轉es5的loader：

注意：配置也可以提出單獨的文件配置：在項目根目錄下創建babel.config.js或者babelrc.js具體配置查看官網教程

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    }

}

 

二.配置處理樣式：

1.安裝依賴：

npm install style-loader css-loader less less-loader -D

2.配置處理樣式的loader:

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }

}

 

三.配置處理靜態資源：

1.安裝依賴：

npm install url-loader file-loader -D

2.配置靜態資源的loader：

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif|bmp)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            },
            {
                test: /\.(mp4|ogg|mp3|wav)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            }
        ]
    }

}

 

四.配置處理html：

1.安裝依賴：

npm install html-webpack-plugin -D

2.配置html插件：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            title: 'webpack5搭建vue3'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif|bmp)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            },
            {
                test: /\.(mp4|ogg|mp3|wav)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            }
        ]
    }

}

 

五.配置開發服務器：

1.安裝依賴：

npm install webpack-dev-server -D

 

2.在webpack.config.js中配置：

devServer: {
        port: 3000,
        hot: true,
        open: true,
        contentBase: '../dist'
    },

 

六.清除打包文件：

1.安裝依賴：

npm install clean-webpack-plugin -D

 

2.配置插件：

const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');


plugins: [
        new CleanWebPackPlugin()
    ],

 

七.設置環境變量：

1.命令方式：

2.配置方式：

3.創建.env文件：

4.cross-env：

npm install cross-env -D

 

八.分環境打包：

1.開發環境：

2.生產環境：

3.測試環境：

九.打包壓縮：

1.壓縮html：

new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            title: 'webpack5搭建vue3',
            minify: {
                collapseWhitespace: true, // 去掉空格
                removeComments: true // 去掉注釋
            }
        }),

 

2.壓縮css：

安裝依賴：

npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

new OptimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })

 

3.壓縮js：

注意：uglifyjs-webpack-plugin不支持壓縮ES6語法的代碼

安裝依賴：

npm install terser-webpack-plugin -D

配置：

 const TerserWebpackPlugin = require('terser-webpack-plugin');

optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin()
        ]
    },

 

4.壓縮圖片：

安裝依賴：

npm install image-webpack-loader -D

配置：

{
                loader: 'image-webpack-loader',
                options: {
                    mozjpeg: {
                        progressive: true,
                    },
                    optipng: {
                        enabled: false,
                    },
                    pngquant: {
                        quality: [0.65, 0.90],
                        speed: 4
                    },
                    gifsicle: {
                        interlaced: false,
                    },
                    webp: {
                        quality: 75
                    }
                }
            }

 

十.配置typescript:

1.安裝依賴：

npm install typescript ts-loader -D

2.配置：

{
                test: /\.ts$/,
                use: [
                    'ts-loader'
                ]
            },

3.初始化：

 

tsc --init

注意：如果報錯，請先全局安裝typescript

npm install -g typescript

 

十一.配置vue：

1.安裝依賴

npm install vue@next -S

npm install vue-loader@next @vue/compiler-sfc

2.配置loader:

 {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }

3.配置插件：

const { VueLoaderPlugin } = require('vue-loader/dist/index');

plugins: [
        new VueLoaderPlugin()
    ]