webpack打包Vue项目

最新推荐文章于 2024-04-27 08:39:59 发布

Summer不秃

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量85

点赞数 1

分类专栏： webpack 文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/z001126/article/details/134036815

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天给大家分享一下webpack编译打包一个vue的项目，希望对大家有所帮助~~~

webpack.config.js

下面是webpack.config.js配置文件的内容

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
        // 输出的 CSS 文件名
        filename: 'styles.css',
      }),
    new HtmlWebpackPlugin({
        template: './public/index.html'
    })
  ],
  resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src')
      },
    extensions: ['.js', '.vue', '.json', '.css', '.less']
  },
  devServer: {
    historyApiFallback: true,
    port: 8088,
  },
};

package.json

下面是package.json的配置文件内容，这里引入了一些webpack打包资源用到的一些Loader，和配置启动命令和打包命令，启动这里使用webpack启动8088本地服务端口

{
  "name": "vue3-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.11",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-stage-2": "^7.8.3",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "vue-loader": "^17.2.2",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "ant-design-vue": "^4.0.1",
    "html-webpack-plugin": "^5.5.3",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "vue": "^3.2.36",
    "vue-router": "^4.2.4"
  }
}