Vue多页面nginx配置下的webpack配置

package.json

{
  "name": "Vue",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "webpack4+vue2"
  },
  "dependencies": {
    "animate.css": "^3.7.0",
    "babel-preset-es2015": "^6.24.1",
    "vant": "^1.6.7",
    "vue-hot-reload-api": "^2.3.1",
    "vue-html-loader": "^1.2.4",
    "vue-lazyload": "^1.2.6",
    "vue-resource": "^1.5.1",
    "vue-router": "^2.8.1",
    "vue-style-loader": "^2.0.5",
    "vue2-toast": "^2.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^9.4.9",
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^7.1.5",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "install": "^0.12.2",
    "jquery": "^3.3.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.14",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "timeago.js": "^4.0.0-beta.2",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.2",
    "vue": "^2.6.6",
    "vue-bus": "^1.2.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.6",
    "vue-timeago": "^5.1.2",
    "vuex": "^3.1.0",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "scripts": {
    "test": "webpack --mode=development --progress --colors --config ./webpack.test.config.js",
    "dev": "webpack --mode=development --progress --colors --config ./webpack.dev.config.js",
    "test-w": "webpack --mode=development --progress --colors --config ./webpack.test.config.js --watch",
    "dev-w": "webpack --mode=development --progress --colors --config ./webpack.dev.config.js --watch",
    "build": "webpack --mode=production --progress --colors --config ./webpack.prod.config.js --watch",
    "prod": "webpack --mode=production --progress --colors --config ./webpack.prod.config.js"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "author": "LF",
  "license": "ISC"
}

postcss.config.js

/*
 * @Author: yang
 * @Date: 2020-10-18 15:58:57
 * @LastEditors: yang
 * @LastEditTime: 2020-10-18 16:10:01
 * @FilePath: \gloud-h5\postcss.config.js
 */
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 10 versions', // 所有主流浏览器最近10版本用
    ],grid: true})

  ]
   
}

.gitignore

node_modules/
npm-debug.log
.idea/
dist/
.html

webpack.base.config.js

/*
 * @Author: yang
 * @Date: 2020-10-18 15:58:57
 * @LastEditors: yang
 * @LastEditTime: 2020-10-18 16:01:02
 * @FilePath: \gloud-h5\webpack.base.config.js
 */
/**
 * Created by Lee on 2019/2/13.
 */
let HtmlWebpackPlugin = require('html-webpack-plugin')
require('babel-polyfill')

let entry = {
    index: ['babel-polyfill', './src/views/index.js'],
}
let plugins = []

Object.keys(entry).forEach(function(e) {
    let plugin = new HtmlWebpackPlugin({
        template: `./src/views/${e}.html`,
        filename: `../${e}.html`,
        hash: true,
        chunks: [e, 'common'],
    })
    plugins.push(plugin)
})
module.exports = {
    entry,
    plugins,
}

webpack.dev.config.js

let webpack = require('webpack');
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const uglifyjs = require('uglifyjs-webpack-plugin');
let config = require('./webpack.base.config')
module.exports = {
    entry: config.entry,
    //入口文件输出配置 （即入口文件最终要生成什么名字的文件、存放到哪里）
    output: {
        path: path.resolve('dist'),
        publicPath: './dist/',
        filename: '[name].js',
    },

    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            },

            {test: /\.vue$/, loader: 'vue-loader'},
            {test: /\.js$/, exclude: /node_modules/,loader: 'babel-loader'},
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        outputPath: 'images/'
                    }
                }]
            },

            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            },

            {test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader'}
        ]
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'common',
                    chunks: 'initial',
                    minChunks: 2,
                }
            }
        }
    },

    plugins: [
        new CleanWebpackPlugin(['dist']),//打包前删除dist
        new VueLoaderPlugin(),
        new uglifyjs(),

        new webpack.DefinePlugin({
            'base_api': '"http://xiaowoxuetang.com/"',
        }),
        ...config.plugins

],

//解决vue报错
resolve: {
    extensions: ['.js', '.vue'],
        alias:{'vue$': 'vue/dist/vue.common.js',}
},

// devServer: {
//     contentBase: './dist',
//     host: 'localhost',      // 默认是localhost
//     port: 8000,             // 端口
//     open: true,             // 自动打开浏览器
//     hot: true,               // 开启热更新
//     compress: true,
// },

mode: 'development'      // 模式配置;development
}

webpack.prod.config

/*
 * @Author: yang
 * @Date: 2020-10-18 15:58:57
 * @LastEditors: yang
 * @LastEditTime: 2020-10-18 16:31:02
 * @FilePath: \gloud-h5\webpack.prod.config.js
 */
let webpack = require('webpack');
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const uglifyjs = require('uglifyjs-webpack-plugin');
let config = require('./webpack.base.config')
module.exports = {
    // entry: {
    //     index: './src/index.js', //首页入口JS
    //     // share: './src/share.js'
    // },
    entry:config.entry,

    //入口文件输出配置 （即入口文件最终要生成什么名字的文件、存放到哪里）
    output: {
        path: path.resolve('dist'),
        publicPath: './dist/',
        filename: '[name].js',
    },

    module: {
        rules: [
            { test: require.resolve('jquery'), 
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            },

            { test: /\.vue$/, loader: 'vue-loader' },
            // { test: /\.css$/, loader: 'style-loader!css-loader' },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' ,},
            { test: /\.(png|jpg|gif)$/, 
                use: [{
                    loader: 'url-loader',
                    options: {
                        //当加载的图片小于limit时，会将图片编译成base64字符串的格式（limit单位 byte）
                        //当加载的图片大于limit时，需要使用url-loader模块进行加载 输入路径 outputPath
                        limit: 8192,   
                        outputPath: 'images/'   
                    }
                }]
            },
            { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader' }
        ]
    },

    optimization: {
        splitChunks: {
          cacheGroups: {//默认的规则不会打包,需要单独定义缓存策略，默认设置了分割node_modules和公用模块。内部的参数可以和覆盖外部的参数
            vendor: {
              name: 'common',//分割的js名称
              chunks: 'initial',//也会同时打包同步和异步，但是异步内部的引入不再考虑，直接打包在一起，会将vue和b的内容直接打包成chunk,
              minChunks: 2,//最小公用模块次数
            }
          }
        }
    },

    plugins: [    
        new CleanWebpackPlugin(['dist']),//打包前删除dist
        new VueLoaderPlugin(),
        new uglifyjs(),

        new webpack.DefinePlugin({
            'base_api': '"http://xiaowoxuetang.com/',
        }),
        ...config.plugins,

    ],        

    //解决vue报错
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
          'vue$': 'vue/dist/vue.common.js',
        }
    },



    mode: 'production'      // 模式配置;development
}