webpack打包vue

青旅半醒 2023-10-12 17:12 73阅读 0赞

在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