webpack vue开发环境配置

webpack配置基础vue开发环境

在vuecli中，可以去定义webpack的配置，在 vue.config.js 中配置chainWebpack 文档

如何自己配置一个vue开发环境

识别vue文件需要安装以下模块

yarn add vue-loader vue-template-compiler -D

webpack.config.js

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "app.[hash].js",
    path: path.join(__dirname, "./dist")
  },

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'components': path.resolve(__dirname, './src/components')
    },

    extensions: ['.js', '.css', '.vue'],
  },

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    hot: true
  },

  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }, 
      // 图片处理
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext][query]'
        }
      },

      // sass scss
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },

      //字体图标的处理
      {
        test: /\.(ttf|woff|woff2)$/,
        type: 'asset',
        generator: {
          filename: 'fonts/[hash][ext][query]'
        }
      },

      // vue
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),

    // 这个插件必须用
    new VueLoaderPlugin()
  ]
}