webpack5基本配置

自己练习时的一些记录 基本配置打包可以。但有一些小问题，，，还没解决。

环境
node              v12.18.2
npm             v6.14.5

需要安装的插件 估计有的没什么用runtime

npm install webpack webpack-cli style-loader css-loader sass-loader webpack-dev-server vue-loader html-webpack-plugin autoprefixer@8.0.0 postcss-loader vue-template-compiler mini-css-extract-plugin babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime html-loader file-loader url-loader vue-style-loader svg-sprite-loader -D

"vue-template-compiler"和 "vue"版本保持一致 例： “^2.6.12”,

"devDependencies": {
        "@babel/core": "^7.16.0",
        "@babel/plugin-transform-runtime": "^7.16.4",
        "@babel/preset-env": "^7.16.4",
        "@babel/runtime": "^7.16.3",
        "@vue/cli-plugin-babel": "4.4.6",
        "@vue/cli-plugin-eslint": "4.4.6",
        "@vue/cli-service": "4.4.6",
        "autoprefixer": "^8.0.0",
        "babel-eslint": "10.1.0",
        "babel-loader": "^8.2.3",
        "chalk": "4.1.0",
        "clean-webpack-plugin": "^4.0.0",
        "connect": "3.6.6",
        "css-loader": "^6.5.1",
        "eslint": "7.15.0",
        "eslint-plugin-vue": "7.2.0",
        "file-loader": "^6.2.0",
        "html-loader": "^3.0.1",
        "html-webpack-plugin": "^5.5.0",
        "lint-staged": "10.5.3",
        "mini-css-extract-plugin": "^2.4.5",
        "postcss-loader": "^6.2.0",
        "runjs": "4.4.2",
        "sass": "1.32.0",
        "sass-loader": "^10.2.0",
        "script-ext-html-webpack-plugin": "2.1.5",
        "style-loader": "^3.3.1",
        "svg-sprite-loader": "5.1.1",
        "url-loader": "^4.1.1",
        "vue-loader": "^15.9.8",
        "vue-style-loader": "^4.1.3",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.64.4",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.6.0"
    },

webpack.config.js 配置内容

 const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const webpack = require("webpack");
module.exports = (env) => {
//使用回调函数。或者直接返回对象。
  console.log('env: ', env);
  console.log('process: ', process);
  return {
    mode: 'development',
    devServer: {
      open: true,
      port: 8888,
      static: path.resolve(__dirname, 'dist'), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误
      proxy: {
        '/prod-api': {
          target: 'http://192.168.1.152:8081',
          changeOrigin: true,
          pathRewrite: {
            '/prod-api': ''
          }
        }
      },
    },
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/[name].js',
      clean: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      new MiniCssPlugin({
        filename: 'css/bundle.css'
      }),
      new VueLoaderPlugin(),
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        Path: ['path'],
        process: 'process/browser',
      })
    ],
    module: {
      rules:
        [
          { test: /\.vue$/, loader: 'vue-loader' },
          { test: /\.js$/, loader: 'babel-loader', exclude: /node_module/ },

          { test: /\.css$/, use: [MiniCssPlugin.loader, 'css-loader', 'postcss-loader'] },
          {
            test: /\.scss$/,
            use: [
              {
                loader: MiniCssPlugin.loader,
                options: { publicPath: '..' }
              },
              'css-loader', 'postcss-loader', 'sass-loader']
          },
          {
            test: /\.svg$/,
            // use: [
            //   { loader: 'file-loader', }
            // ],
            // type: 'asset/inline',//转换为base64.在线地址，不会被打包出来
            type: 'asset/resource',//静态资源，会被打包
            // type: 'asset'//自动选择   默认大于8k 就会创建资源  可自己调整
            generator: {
              filename: './svg/[hash].[ext]'
            },
          },
          {
            test: /\.jpg$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 4 * 1024 * 1024   //4M
              }
            }
          }, {
            test: /\.gif$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 4 * 1024 * 1024   //4M
              }
            }
          },
          {
            test: /\.png$/,
            type: 'asset/resource',
            //打包后的静态资源位置 及 文件名
            generator: {
              filename: './image/[hash].[ext]'
            },
            parser: {
              dataUrlCondition: {
                maxSize: 1024 * 1024
              }
            }
          },
          { test: /\.html$/, loader: 'html-loader' },
        ]
    },
    resolve: {
      // https://github.com/babel/babel/issues/8462
      // https://blog.csdn.net/qq_39807732/article/details/110089893
      // 如果确认需要node polyfill，设置resolve.fallback安装对应的依赖
      //webpack5 关闭node功能 要自己导入
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        path: require.resolve('path-browserify'),
        url: require.resolve('url'),
        buffer: require.resolve('buffer/'),
        util: require.resolve('util/'),
        stream: require.resolve('stream-browserify/'),
        vm: require.resolve('vm-browserify'),
        process: require.resolve('process')
      },
      alias: {
        crypto: false,
        '@': path.resolve(__dirname, './src')
      },

      extensions: ['.json', '.js', '.vue']
    },
    //关闭性能提示
    performance: {
      hints: false
    }
  }
}

webpack.config.js 不足说明

我这边还没有进行。.env的配置 只配置了简单的node方法。我也不太懂。。

 1. Webpack5 移除了 Node.js Polyfill，将会导致一些包变得不可用   node中的一些方法不能直接使用，需要手动导入。
 2. webpack5好像也不能自动识别项目本地的 环境配置文件 .env文件  我这边还没有进行。.env的配置 
 

babel.config.js 配置

module.exports = {
  presets: [
    '@babel/preset-env',
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

postcss.config.js 配置 自动添加样式前缀

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

package.json 配置 最后添加

"browserslist": [
        "> 1%",
        "last 2 versions"
    ],
    "browser": {
        "crypto": false
    }

项目目录