9999

zhaoxiaoqiang

2021-09-01 923c9beac02bf756d09c2e70b119e50b95af9f74

 webpack.common.js

@@ -6,124 +6,123 @@
 * @Description:
 */
//  webpack通用配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const vuxLoader = require('vux-loader');
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const vuxLoader = require("vux-loader");
let env = process.env.NODE_ENV;
//打包地址
let srcUrl = '/sib_wx_scorem/'
let srcUrl = "/sib_wx_scoren/";
module.exports = {
    entry: {
        index: "./src/index.js",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: env ? "/sib_wx_scoren/" : "/", //根据线上项目路径更改 /projectpath
  },
  /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
   * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
   */
  externals: {
    vue: "Vue",
    axios: "axios",
    vuex: "Vuex",
    router: "VueRouter",
  },
  resolve: {
    extensions: [".vue", ".js", ".less"],
    alias: {
      //别名配置
      "@": path.resolve(__dirname, "src"),
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: env ? '/sib_wx_scorem/' : '/' //根据线上项目路径更改 /projectpath
    },
    /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
     * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
     */
    externals: {
        vue: "Vue",
        axios: "axios",
        vuex: "Vuex",
        router: "VueRouter",
    },
    resolve: {
        extensions: ['.vue', '.js', '.less'],
        alias: { //别名配置
            "@": path.resolve(__dirname, 'src')
        }
    },
    module: {
        rules: [{
                test: /\.(svg|ttf|eot|woff)\??.*$/,
                loader: "url-loader?limit=10000"
  },
  module: {
    rules: [
      {
        test: /\.(svg|ttf|eot|woff)\??.*$/,
        loader: "url-loader?limit=10000",
      },
      {
        test: /\.css$/,
        use: [env ? MiniCssExtractPlugin.loader : "vue-style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          env ? MiniCssExtractPlugin.loader : "vue-style-loader",
          "css-loader",
          "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
          "less-loader",
          // 全局注入less变量，在所有vue组件中可使用
          // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
          {
            loader: "style-resources-loader",
            options: {
              patterns: [path.resolve(__dirname, "src/style/mixins.less")],
            },
            {
                test: /\.css$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader",
                ],
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)/, //处理图片
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
              outputPath: "img/",
              // publicPath: `${srcUrl}img`
              publicPath: `/img`,
            },
            {
                test: /\.less$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
                    'less-loader',
                    // 全局注入less变量，在所有vue组件中可使用
                    // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
                    {
                        loader: 'style-resources-loader',
                        options: {
                            patterns: [
                                path.resolve(__dirname, 'src/style/mixins.less'),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)/, //处理图片
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 100000,
                        outputPath: 'img/',
                        // publicPath: `${srcUrl}img`
                        publicPath: `/img`
                    }
                }]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // @vue/babel-preset-jsx  vue jsx语法支持
                        presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
                        plugins: ["dynamic-import-webpack"], //import 函数支持，需要安装
                        // plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            },
        ]
    },
    plugins: [
        // 静态目录
        new CopyPlugin([{
            from: path.resolve(__dirname, 'static'),
            to: 'static',
        }, ]),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html', //以这个文件作为模板
            filename: 'index.html', //打包后的文件名
            title: 'Vue_webpack',
            hash: true,
            minify: {
                removeComments: true, //移除注释
                collapseWhitespace: true,
                removeEmptyAttributes: true, //移除空属性
                removeAttributeQuotes: true //移除属性html标签属性的引号 ""
            },
        }),
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            // @vue/babel-preset-jsx  vue jsx语法支持
            presets: ["@babel/preset-env", "@vue/babel-preset-jsx"],
            plugins: ["dynamic-import-webpack"], //import 函数支持，需要安装
            // plugins: ["@babel/plugin-transform-runtime"]
          },
        },
      },
    ],
}

  },
  plugins: [
    // 静态目录
    new CopyPlugin([
      {
        from: path.resolve(__dirname, "static"),
        to: "static",
      },
    ]),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html", //以这个文件作为模板
      filename: "index.html", //打包后的文件名
      title: "Vue_webpack",
      hash: true,
      minify: {
        removeComments: true, //移除注释
        collapseWhitespace: true,
        removeEmptyAttributes: true, //移除空属性
        removeAttributeQuotes: true, //移除属性html标签属性的引号 ""
      },
    }),
  ],
};

// module.exports = vuxLoader.merge(webpackConfig, {
//     plugins: [{