关于vue.js:Vue多页面nginx配置下的webpack配置

7次阅读

共计 6441 个字符，预计需要花费 17 分钟才能阅读完成。

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
}
正文完
vue.js
发表至： vue.js
2020-10-18
 0
关于vue.js:Vue3API学习笔记持续更新中
关于vue.js:vue源码分析渲染过程
关于vue.js:微型Vue框架构建Part4Render渲染前
关于vue.js:Vue3头像选择器

站内搜索

-「」