webpack打包vue

在Windows10系统下，自定义打包整个Vue文件夹项目的相关配置项涉及以下内容：

1. 安装Node.js和npm

   • Node.js官网：https://nodejs.org/en/download/
   • npm是Node.js的包管理工具，在Node.js安装后会自带安装

2. 创建Vue项目

   • 使用Vue CLI 3.x创建项目，具体命令如下：

   vue create my-project
   

3. 配置打包相关项

   • 安装webpack和webpack-cli，具体命令如下：

   npm install webpack webpack-cli --save-dev
   

   • 在根目录下创建webpack.config.js文件，该文件用于配置打包相关项，具体代码如下：

   const path = require('path');
   
   module.exports = {
     entry: './src/main.js', // 入口文件
     output: { // 输出配置
       path: path.resolve(__dirname, 'dist'), // 输出目录
       filename: 'bundle.js' // 输出文件名
     },
     module: { // 模块配置
       rules: [ // 规则
         {
           test: /\.vue$/, // 匹配.vue文件
           loader: 'vue-loader' // 使用vue-loader处理
         },
         {
           test: /\.js$/, // 匹配.js文件
           loader: 'babel-loader', // 使用babel-loader处理
           exclude: /node_modules/ // 排除node_modules目录
         },
         {
           test: /\.(png|jpg|gif)$/, // 匹配图片文件
           loader: 'url-loader', // 使用url-loader处理
           options: {
             limit: 8192, // 小于8KB的图片转为base64编码
             name: '[name].[ext]', // 输出文件名
             outputPath: 'images/' // 输出目录
           }
         }
       ]
     }
   };
   

   • 在package.json文件中添加打包命令，具体代码如下：

   "scripts": {
     "build": "webpack --mode production"
   }
   

4. 运行打包命令

   • 在终端中执行以下命令即可进行打包：

   npm run build