详解基于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文件中的webpackwebpack-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.jswebpack.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-pluginuglifyjs-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-pluginoptimize-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.filenameoutput.chunkFilename
  • 修改plugins选项,添加VueLoaderPlugin插件,删除原来的extract-text-webpack-pluginoptimize-css-assets-webpack-plugin插件,替换成mini-css-extract-plugin
  • 添加optimization.minimizer选项
  • 修改performance.hints选项

2.4. 测试

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

npm run serve

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

3. 示例说明

示例如下

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

  1. 确认当前使用Vue CLI的版本是否是3.x,如果不是,需要通过以下命令升级:
npm install -g @vue/cli
  1. 进入Vue项目文件夹,检查webpack.dev.conf.jswebpack.prod.conf.js文件。

  2. 如果希望使用webpack4,需要先升级webpack依赖包:

npm install --save-dev webpack@4 webpack-cli
  1. 修改webpack.common.conf.js文件中的loader配置。

  2. 修改webpack.dev.conf.js文件和webpack.prod.conf.js文件中的plugins和optimization选项。

  3. 运行npm run serve命令,测试升级后的项目是否正常运行。

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

阅读剩余 84%

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

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 面试问题Vue双向数据绑定原理

    面试问题Vue双向数据绑定原理 前言 在Vue中,双向数据绑定是一项非常重要的特性,也是其比较独特的特性之一。理解Vue中双向数据绑定的原理,是面试Vue开发岗位的常见问题之一。本篇文章将从以下几个方面来讲解Vue双向数据绑定的原理:Vue的响应式系统、Object.defineProperty()、实现双向绑定的具体原理以及如何自定义实现双向绑定。 Vue…

    Vue 2023年5月28日
    00
  • vue中 数字相加为字串转化为数值的例子

    在 Vue 中,有时候我们需要将一个字符串类型的数字转换为数字类型,这时候我们可以使用 + 运算符,将字符串类型的数字转换为数字类型。下面是一个将字符串类型的数字相加运算后,将结果转换为数字类型的例子: <template> <div> <input type="text" v-model="num…

    Vue 2023年5月27日
    00
  • vue中使用vue-pdf的方法详解

    关于”vue中使用vue-pdf的方法详解”,以下是详细步骤: 1.安装 vue-pdf 在vue项目中,可以使用npm指令进行安装,在命令行中输入: npm install vue-pdf –save 2.配置 vue-pdf 在Vue项目中,需要在 main.js 中引入 vue-pdf 并进行全局注册: import VuePdf from ‘vue…

    Vue 2023年5月28日
    00
  • Vue插件打包与发布的方法示例

    当我们开发Vue.js插件时,我们通常需要对插件进行打包,并发布到npm上,供其他开发者使用。以下是Vue插件打包与发布的方法示例: 1. 打包插件 首先,我们需要使用npm进行插件打包,使用以下命令进行安装相关的开发依赖: npm install –save-dev vue-cli-plugin-library 接下来,使用命令行工具进行打包,可以使用以…

    Vue 2023年5月28日
    00
  • Vue插值、表达式、分隔符、指令知识小结

    下面是关于Vue插值、表达式、分隔符、指令的详细讲解。 Vue模板中的插值和表达式 Vue中的插值和表达式允许开发者在HTML模板中渲染动态数据。插值和表达式的区别在于,插值可以对简单的变量进行渲染,表达式可以对复杂的表达式进行计算和渲染。 插值的使用 插值的语法使用两个大括号{{}},将需要渲染的数据包裹在其中,如下所示: <div>{{mes…

    Vue 2023年5月29日
    00
  • 聊聊Javascript中try catch的2个作用

    标题:聊聊JavaScript中try catch的2个作用的完整攻略 首先,在JavaScript中,try-catch语句是一种错误处理机制。try块中的代码将被执行,如果出现异常或错误,catch块中的代码将被捕获并执行。在JavaScript中,try-catch语句有两个主要的作用。 作用一:捕获并处理异常 try-catch语句最常用的作用是用来…

    Vue 2023年5月28日
    00
  • 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

    使用Bootstrap + Vue.js来实现动态表格展示、新增和删除功能需要进行以下步骤: 步骤一:引入所需库 在项目中引入Bootstrap和Vue.js两个库,可以使用CDN或在本地引入。 <!– 引入Bootstrap CSS文件 –> <link rel="stylesheet" href="ht…

    Vue 2023年5月27日
    00
  • Vue首屏加载过慢出现白屏的6种优化方案汇总

    当使用Vue.js开发网站时,如果页面首屏加载过慢,会出现白屏现象,这不仅对用户体验不友好,还会影响搜索引擎收录等问题。为了解决这个问题,我们可以尝试以下6种优化方案。 1. 使用首屏骨架屏 在页面白屏的情况下,优化方案之一是使用首屏骨架屏。骨架屏是一种占位符,能够显示页面主要内容的布局和结构,让用户能够感知到页面加载的进度,提高用户体验。我们可以使用Vue…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部