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}