详解基于Vue cli生成的Vue项目的webpack4升级

下面我将详细讲解“详解基于Vue CLI生成的Vue项目的webpack4升级”的完整攻略，包括具体步骤和示例说明。

1. 升级准备

1.1. 确认Vue CLI版本

首先需要确认当前使用的Vue CLI版本是否是3.x版本。如果不是3.x，需要先进行升级。可以通过以下命令检查版本：

vue --version

如果版本低于3.x，可以通过以下命令进行升级：

npm install -g @vue/cli

1.2. 确认webpack版本

确认当前生成的Vue项目中使用的是webpack3还是webpack4。如果不确定，可以查看package.json文件中的webpack和webpack-dev-server依赖项的版本号，如果版本是3.x，说明当前项目使用的是webpack3。

2. 升级过程

2.1. Vue CLI升级

如果确认当前使用的是Vue CLI 2.x版本，需要先卸载Vue CLI 2.x，然后安装Vue CLI 3.x。可以通过以下命令来卸载Vue CLI 2.x：

npm uninstall -g vue-cli

然后通过以下命令安装Vue CLI 3.x：

npm install -g @vue/cli

2.2. 创建新项目并检查配置

创建一个新的Vue项目：

vue create my-project

创建完成后，进入项目文件夹，并检查webpack.dev.conf.js和webpack.prod.conf.js文件，确认是否包含如下插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

如果不存在这些插件，需要手动添加它们：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCSSAssetsPlugin({
      cssProcessorOptions: {
        safe: true
      }
    })
  ],
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  }
}

注意，optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin已经不再是webpack的内置插件，需要手动安装并引入。

npm install --save-dev optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

2.3. 升级webpack

首先需要升级项目中使用的webpack依赖包：

npm install --save-dev webpack@4 webpack-cli

然后需要对webpack配置文件进行相应修改。

2.3.1. webpack.common.conf.js

首先修改webpack.common.conf.js文件，更新loader配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true,
          cssModules: {
            localIdentName: '[name]-[hash:base64:5]',
            camelCase: true
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  }
}

注意：vue-style-loader已经不再需要，使用MiniCssExtractPlugin.loader替代即可。

2.3.2. webpack.dev.conf.js

然后修改webpack.dev.conf.js文件：

const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.common.conf')

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    hot: true,
    open: true,
    contentBase: 'dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      inject: true
    })
  ],
  optimization: {
    usedExports: true
  },
  performance: {
    hints: false
  }
})

主要更新如下：

添加mode选项
添加devtool选项
添加devServer选项
修改plugins选项，删除原来的extract-text-webpack-plugin和optimize-css-assets-webpack-plugin插件，替换成mini-css-extract-plugin
添加optimization.usedExports选项

2.3.3. webpack.prod.conf.js

最后是webpack.prod.conf.js文件：

const merge = require('webpack-merge')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const baseWebpackConfig = require('./webpack.common.conf')

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  devtool: false,
  output: {
    filename: 'js/[name].[chunkhash:8].js',
    chunkFilename: 'js/[name].[chunkhash:8].js'
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCSSAssetsPlugin({
      cssProcessorOptions: {
        safe: true
      }
    })
  ],
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  performance: {
    hints: 'warning'
  }
})

主要更新如下：

添加mode选项
添加devtool选项
修改output.filename和output.chunkFilename
修改plugins选项，添加VueLoaderPlugin插件，删除原来的extract-text-webpack-plugin和optimize-css-assets-webpack-plugin插件，替换成mini-css-extract-plugin
添加optimization.minimizer选项
修改performance.hints选项

2.4. 测试

升级完成后，使用以下命令启动本地开发服务器：

npm run serve

如果没有报错并且能够正常访问页面，说明升级完成。

3. 示例说明

示例如下

以下是一个使用Vue CLI生成的Vue项目中的webpack升级示例:

确认当前使用Vue CLI的版本是否是3.x，如果不是，需要通过以下命令升级：

npm install -g @vue/cli

进入Vue项目文件夹，检查webpack.dev.conf.js和webpack.prod.conf.js文件。
如果希望使用webpack4，需要先升级webpack依赖包：

npm install --save-dev webpack@4 webpack-cli

修改webpack.common.conf.js文件中的loader配置。
修改webpack.dev.conf.js文件和webpack.prod.conf.js文件中的plugins和optimization选项。
运行npm run serve命令，测试升级后的项目是否正常运行。

以上就是升级基于Vue CLI生成的Vue项目的webpack4的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解基于Vue cli生成的Vue项目的webpack4升级 - Python技术站