webpack5项目搭建Vue-Cli(生产环境)

Posted 2022-12-23 天界程序员

我们这里的webpack.prod.js采用复用react-cli的开发模式的配置进行改造。

step1–添加vue-loader配置

1、rule.loader

  test: /\\.vue$/,
  loader: 'vue-loader',
,

2、插件配置

const  VueLoaderPlugin  = require('vue-loader')
const  DefinePlugin  = require('webpack')

 new VueLoaderPlugin(),
    // 解决页面警告
 new DefinePlugin(
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
 ),

step2–修改文件扩展名

  resolve: 
    extensions: ['.vue', '.js', '.json'], // 自动补全文件扩展名，让vue可以使用
  ,

step3–babel只处理js

// babel处理js资源

  test: /\\.js$/,
  loader: 'babel-loader',
  options: 
    cacheDirectory: true,
    cacheCompression: false,
  ,
,

step4–补充依赖包

npm i mini-css-extract-plugin css-minimizer-webpack-plugin copy-webpack-plugin -D

npm i image-minimizer-webpack-plugin imagemin -D

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

step5–修改命令路径

"scripts": 
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  ,

此外，vue-loader不支持oneOf操作。

step6–现阶段详细配置

// webpack.prod.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const  VueLoaderPlugin  = require("vue-loader");
const  DefinePlugin  = require("webpack");

const getStyleLoaders = (preProcessor) => 
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    
      loader: "postcss-loader",
      options: 
        postcssOptions: 
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        ,
      ,
    ,
    preProcessor,
  ].filter(Boolean);
;

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/[name].[contenthash:10].js",
    chunkFilename: "static/js/[name].[contenthash:10].chunk.js",
    assetModuleFilename: "static/js/[hash:10][ext][query]",
    clean: true,
  ,
  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      ,
      
        test: /\\.less$/,
        use: getStyleLoaders("less-loader"),
      ,
      
        test: /\\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      ,
      
        test: /\\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      ,
      
        test: /\\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: 
          dataUrlCondition: 
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          ,
        ,
      ,
      
        test: /\\.(ttf|woff2?)$/,
        type: "asset/resource",
      ,
      
        test: /\\.(jsx|js)$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: 
          cacheDirectory: true,
          cacheCompression: false
        ,
      ,
      // vue-loader不支持oneOf
      
        test: /\\.vue$/,
        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
        options: 
          // 开启缓存
          cacheDirectory: path.resolve(
            __dirname,
            "node_modules/.cache/vue-loader"
          ),
        ,
      ,
    ],
  ,
  plugins: [
    new ESLintWebpackPlugin(
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    ),
    new HtmlWebpackPlugin(
      template: path.resolve(__dirname, "../public/index.html"),
    ),
    new CopyPlugin(
      patterns: [
        
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true,
          globOptions: 
            ignore: ["**/index.html"],
          ,
          info: 
            minimized: true,
          ,
        ,
      ],
    ),
    new MiniCssExtractPlugin(
      filename: "static/css/[name].[contenthash:10].css",
      chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    ),
    new VueLoaderPlugin(),
    new DefinePlugin(
      __VUE_OPTIONS_API__: "true",
      __VUE_PROD_DEVTOOLS__: "false",
    ),
  ],
  optimization: 
    // 压缩的操作
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin(),
      new ImageMinimizerPlugin(
        minimizer: 
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: 
            plugins: [
              ["gifsicle",  interlaced: true ],
              ["jpegtran",  progressive: true ],
              ["optipng",  optimizationLevel: 5 ],
              [
                "svgo",
                
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    
                      name: "sortAttrs",
                      params: 
                        xmlnsOrder: "alphabetical",
                      ,
                    ,
                  ],
                ,
              ],
            ],
          ,
        ,
      ),
    ],
    splitChunks: 
      chunks: "all",
    ,
    runtimeChunk: 
      name: (entrypoint) => `runtime~$entrypoint.name`,
    ,
  ,
  resolve: 
    extensions: [".vue", ".js", ".json"],
  ,
  mode: "production",
  devtool: "source-map",
;