zhouhao
2021-11-04 b68359eceae3ce3060e7733586501f1b9a82c42e
webpack.common.js
@@ -1,129 +1,128 @@
/*
 * @Author: 小明丶
 * @Date: 2019-08-19 15:23:18
 * @LastEditors: 小明丶
 * @LastEditTime: 2021-01-07 10:34:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-16 10:55:31
 * @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_scoref/'
let srcUrl = "/sib_wx_scoreq/";
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_scoreq/" : "/", //根据线上项目路径更改 /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_scoref/' : '/' //根据线上项目路径更改 /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: [
        // 静态目录
        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: [{