0
点赞
收藏
分享

微信扫一扫

vue使用webpackjs打包配置

vue使用webpackjs打包配置_Webpack

Vue使用Webpack进行打包配置,以下是基本步骤:

  1. 安装Webpack和相关的加载器

npm install webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader file-loader url-loader --save-dev

  1. 创建webpack配置文件webpack.config.js并进行基本配置

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

  1. 在build脚本中调用Webpack进行打包

{
  "name": "my-project",
  "scripts": {
    "build": "webpack --mode production"
  }
}

以上是一个基本的Webpack配置,可以根据实际需求进行修改。

举报

相关推荐

0 条评论