vue项目webpack打包配置

基于vue/cli3.0+脚手架搭建Vue项目(12)

---

---

前言

---

一、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运行命令行，顺便注意下面的"build": "vue-cli-service build --no-module",添加了后缀 --no-module，因为@vue/cli-service版本过高可能会让npm run build执行两遍打包，自己选择是否追加后缀 --no-module

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-module",
    "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'),
      })
    ]
  }

二、打包验证

运行指令：

npm run build

打包好的文件部署在服务端后：

运行服务地址：http://47.106.123.118:8080/#/，获取登录页面账号和密码可查看之前文章：vue项目axios的封装和使用

---

总结

要想把生人变成熟人，就要找到这个人的熟人。