vue安装yang_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})

]

}

.gitignorenode_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.jslet 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

}