一、進階版本有哪些特點？

1. 首先進階版本對【開發(fā)環(huán)境】和【線上環(huán)境】的配置進行了區(qū)分。
2. 本文的【示例】主要是代理服務器的一個體現(xiàn)（主要是有這樣的思想，也方便后續(xù)想要對項目進行懶加載，分包等優(yōu)化配置進行環(huán)境區(qū)分。便于管理項目）

這里就不做過多的贅述了，大家可以看下面的第二步驟

二、主要的文件代碼如下

1.設置一個公共配置 webpack.common文件

代碼如下（示例）：

const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js',
        clean: true,
    },
    module:{
        rules:[
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
              },
              {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              },
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template:'./public/index.html',
        title:'webpackTest',
        filename:'index.html'
    }),new VueLoaderPlugin()]
   
}

2.設置一個【dev】config文件

代碼如下（示例）：

const {merge}=require('webpack-merge')
const common =require('./webpack.common.js')

module.exports=merge(common,{
    mode:'development',
    devServer:{
        static: './public',
        open:true,
    }
})

該處使用的url網(wǎng)絡請求的數(shù)據(jù)。

3.設置一個【prod】config文件

const {merge}=require('webpack-merge')

const common =require('./webpack.common.js')

module.exports=merge(common,{
    mode:'production'
})

三、配置 package.json文件

1.代碼如下

    // dev 代表的就是開發(fā)環(huán)境
    "dev":"webpack serve --config ./webpack.dev.js",
    //build 代表的是線上環(huán)境
    "build":"webpack --config ./webpack.prod.js"

總結如下（一定要看）

根據(jù)上面的思路，我們可以確定。如果后續(xù)我們的項目體積太大，就可以在prod.js中去配置對應的 webpack plugin去滿足我們的項目分包，懶加載等打包的操作

1. 后續(xù)會去更新，如何在自己的項目中集成 eslint 和 prettier 工具去管理咱們項目的代碼規(guī)范問題 和 2. 集成到Git的生命周期中的代碼提交監(jiān)測和修復的功能文章來源地址http://www.zghlxwxcb.cn/news/detail-704458.html

到了這里，關于Webpack5 搭建Vue項目（進階版）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！