vue项目之webpack打包配置（基于vue/cli3.0+脚手架搭建Vue项目）

最新推荐文章于 2024-07-25 14:49:57 发布

weixin_53140002

最新推荐文章于 2024-07-25 14:49:57 发布

阅读量2.1k

点赞数

文章标签： webpack vue.js javascript

原文链接：https://blog.csdn.net/weixin_43697548/article/details/124551474?ops_request_misc=&request_id=&biz_id=102&utm_term=webpack%E6%89%93%E5%8C%85vue%E7%9A%84%E9%85%8D%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-1245

版权

一、webpack配置

1.配置vue.config.js

 publicPath: './',
 outputDir: 'dist',
 assetsDir:"static",
 indexPath:'index.html',

2.配置DllPlugin提高构建和打包速度

1:项目根目录新建dll.js文件

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    vendor: [ 'vue-router', 'element-ui']
  },
  output: {
    // 配置输出文件存放在本地的目录
    path: path.join(__dirname, 'dllFiles'),
    filename: '[name].js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      // DllPlugin的name属性需要和libary保持一致
      name: '[name]_[hash]',
      //指定当前目录
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      // context需要和webpack.config.js保持一致
      context: __dirname
    })
  ]
}

2:webpack-cli依赖的安装

npm install webpack-cli -D

3:package.json文件的scripts内添加dll运行命令行

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dll": "webpack --config ./dll.js"
  },

运行指令：

npm run dll

此时会在根目录生成vendor-manifest.json文件和dllFiles文件夹

在这里插入图片描述

4:根目录的webpack.config.js文件配置dll（tip:也可以用vue.config.js文件configureWebpack配置）

module.exports = {
    // ...其他配置
    // 配置dll
    plugins: [
      new webpack.DllReferencePlugin({
        context: __dirname,
        // manifest就是我们第3步中打包出来的json文件
        manifest: require('./vendor-manifest.json'),
      })
    ]
  }