vue-cli and webpack配置（理解）

其他 2020-02-14 09:04:53 阅读次数: 0

文章目录

一 webpack配置（理解）

1. 未配置的webpack打包

webcpack ./src/main.js ./dist/bundle.js

2. webpack配置-JS

  1. 创建webpack.config.js文件
  2. 配置（配置完命令行输入webpack即可完成打包）
const path = require('path')

module.exports = {
	entry: './src/main.js',
	//main.js一般是入口文件
	output: {
	//获得绝对路径
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
}
  1. node项目package.json中scripts作用：指令映射
  2. 在package.json中scripts加入"build": "webpack"
  3. 命令行中运行npm run build即可解析（优点：优先使用本地版本的webpack，而不是全局）

3. webpack配置-CSS

  1. 安装 css-loader 和 style-loader
npm install css-loader style-loader --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  //加入的CSS相关配置
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
  1. 在入口函数main.js中加入依赖
//CommonJS导入模块
const {add,nu} = require('./js/mathUtils.js')
//ES6导入模块
import {name,age} from './js/info'
//加入内容
require('./css/style.css')
  1. 命令行中运行npm run build解析

4. webpack配置-Less

  1. 安装 less 和 less-loader
npm install less-loader less --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  //加入的CSS相关配置
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
    ]
  }
}
  1. 在入口函数main.js中加入依赖
//CommonJS导入模块
const {add,nu} = require('./js/mathUtils.js')
//ES6导入模块
import {name,age} from './js/info'
require('./css/style.css')
//加入内容
require('./css/infront.less')

5. webpack配置-图片

  1. 安装 url-loader 和 file-loader
npm install url-loader file-loader --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片应该用打包路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000,
              //防止命名重复
              name:'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

6. webpack配置-ES6转ES5

  1. 安装包
npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      //ES6转ES5
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
}

7. webpack配置-Vue

  1. 安装包
npm install vue
  1. 在webpack.config.js中加入相关配置
const path = require('path')

module.exports = {
  entry: './main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    publicPath: "/dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

8. webpack配置-Vue封装配置

  1. 安装
npm install vue-loader vue-template-compiler --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    publicPath: "/dist",
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

9. webpack配置-条幅插件

  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

10. webpack配置-html-webpack-plugin插件

  1. 安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');


module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

11. webpack配置-uglifyjs-webpack-plugin插件(压缩)

  1. 安装html-webpack-plugin（指定1.0.1版本）
npm install uglifyjs-webpack-plugin@1.0.0 --save-dev
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');


module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

12. webpack配置-webpack-dev-server（搭建服务器）

  1. 安装webpack-dev-server（2.9.1版本）
npm install webpack-dev-server@2.9.1 -g
  1. 在webpack.config.js中加入相关配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');
const uglifyJS = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
      //vue-loader需要的插件
      new VueLoaderPlugin(),
      //条幅插件
      new webpack.BannerPlugin('最终版权归作者所有'),
      //html-webpack-plugin 将入口html文件加入到dist中
      new html({
        template: 'index.html',//依照这个模板编译新的html文件
      }),
      //压缩代码
      new uglifyJS(),

  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: './dist',
    port: '3001',
    inline:true,//实时监听
  }
}
  1. 执行 webpack-dev-server

13. webpack配置 生产/开发环境分离

  1. 安装 webpack-merge
npm install webpack-merge --save-dev
  1. 创建 base.config.js 存放共有环境
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
    //html-webpack-plugin 将入口html文件加入到dist中
    new html({
      template: 'index.html',//依照这个模板编译新的html文件
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}
  1. 创建 dev.config.js 存放开发环境
const merge = require('webpack-merge');
const baseConfig =require('./base.config');

module.exports = (baseConfig,{
  devServer: {
     contentBase: './dist',
     port: '3001',
     inline:true,//实时监听
  }
})
  1. 创建 prod.config.js 存放开发环境
const uglifyJS = require('uglifyjs-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig =require('./base.config')

module.exports = merge(baseConfig,{
  plugins: [
    //压缩代码
    new uglifyJS(),
  ]
})
  1. 在package中添加映射
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  1. npm run build编译
  2. npm run dev服务器启动

二 Vue组件分离配置总结

1. index.html 文件（存放DOM基本结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<body>
//为模板提供替换点 
<div id="app"></div>
//导入编译后的js文件
<script src="./dist/bundle.js"></script>
</body>
</html>

2. main.js 文件（导入组件，用组件替换对应DOM）

import Vue from 'vue'
import App from './vue/App'

new Vue({
  el: "#app",
  template: '<App/>',
  components: {
    App
  }
})

3. App.vue（定义模板与样式）

<template>
  <div>
    <h2>组件测试{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "App",
    data(){
      return{
        name: "第一"
      }
    }
  }
</script>

<style scoped>
h2{
  color:green;
}
</style>

4. package.json（依赖包）

{
  "name": "pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11",
    "webpack-dev-server": "^2.9.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^1.0.0",
    "url-loader": "^3.0.0",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-merge": "^4.2.2"
  }
}

5. 创建 base.config.js 存放共有环境

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const html = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  //main.js一般是入口文件
  output: {
    //获得绝对路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    //加入公共路径，编译后的图片会用公共路径
    //publicPath: "/dist",
  },
  plugins: [
    //vue-loader需要的插件
    new VueLoaderPlugin(),
    //条幅插件
    new webpack.BannerPlugin('最终版权归作者所有'),
    //html-webpack-plugin 将入口html文件加入到dist中
    new html({
      template: 'index.html',//依照这个模板编译新的html文件
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,//正则
        //css-loader只复制将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader,从右往左加载，所以css-loader放右边
        use: ['style-loader', 'css-loader']
      },
      //加入less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //图片配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要用file-loader，但不想需要配置，安装即可
              limit:12000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //配置vue使用runtime-compiler版本，可以对代码中template进行编译
  resolve: {
    //省略后缀
    extensions: ['.js','.css','.vue'],
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}

6. 创建 dev.config.js 存放开发环境

const merge = require('webpack-merge');
const baseConfig =require('./base.config');

module.exports = (baseConfig,{
  devServer: {
     contentBase: './dist',
     port: '3001',
     inline:true,//实时监听
  }
})

7. 创建 prod.config.js 存放开发环境

const uglifyJS = require('uglifyjs-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig =require('./base.config')

module.exports = merge(baseConfig,{
  plugins: [
    //压缩代码
    new uglifyJS(),
  ]
})

三 Vue CLI 脚手架（能快速搭建Vue开发环境以及对webpack进行配置）

1. 什么是Vue CLI

Vue CLI（Command-Line Interface）俗称 脚手架 是Vue官方发布的一个框架，用来快速构建项目结构

2. 安装vue-cli

npm install @vue/cli -g

拉取vue-cli 2.X版本

npm install @vue/cli-init -g
超人不会飞/
发布了34 篇原创文章 · 获赞 6 · 访问量 4450
私信 关注

猜你喜欢

转载自blog.csdn.net/ChristWTF/article/details/104287320
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022