diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index b4210fa9b851d428cf4d54b3aaf659affb8239c0..b68e7e1ce921e4f05b916475015331a29f454d07 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -1,63 +1,65 @@ -"use strict"; -const path = require("path"); -const utils = require("./utils"); -const webpack = require("webpack"); -const config = require("../config"); -const merge = require("webpack-merge"); -const baseWebpackConfig = require("./webpack.base.conf"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); -const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); -const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +'use strict' +const path = require('path') +const utils = require('./utils') +const webpack = require('webpack') +const config = require('../config') +const merge = require('webpack-merge') +const baseWebpackConfig = require('./webpack.base.conf') +const CopyWebpackPlugin = require('copy-webpack-plugin') +const HtmlWebpackPlugin = require('html-webpack-plugin') +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') +const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const env = - process.env.NODE_ENV === "testing" - ? require("../config/test.env") - : require("../config/prod.env"); + process.env.NODE_ENV === 'testing' + ? require('../config/test.env') + : require('../config/prod.env') // cdn 引入 -let externalModules = {}; +let externalModules = {} //cdn 配置 -let externalConfig = []; -if (process.env.NODE_ENV === "production") { +let externalConfig = [] +if (process.env.NODE_ENV === 'production') { //生产环境 externalModules = { - vue: "Vue", - "vue-router": "VueRouter", - vuex: "Vuex", - axios: "axios", - "element-ui": "element-ui", - echarts: "echarts", - 'vuex-persistedstate':'persistedstate', - 'highlight':'hljs' - }; + vue: 'Vue', + 'vue-router': 'VueRouter', + vuex: 'Vuex', + axios: 'axios', + 'element-ui': 'element-ui', + echarts: 'echarts', + highlight: 'hljs', + } externalConfig = [ - { js: "https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js", css: "" }, + {js: 'https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js', css: ''}, { - js: "https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js", - css: "", + js: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js', + css: '', }, - { js: "https://unpkg.com/axios/dist/axios.min.js", css: "" }, - { js: "https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js", css: "" }, + {js: 'https://unpkg.com/axios/dist/axios.min.js', css: ''}, + {js: 'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js', css: ''}, { - js: "https://unpkg.com/element-ui/lib/index.js", - css: "https://unpkg.com/element-ui/lib/theme-chalk/index.css", + js: 'https://unpkg.com/element-ui/lib/index.js', + css: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css', }, { - js: "https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js", - css: "", + js: 'https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js', + css: '', }, { - js: "https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js", - css: "", + js: 'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js', + css: '', }, { - js: "", - css: "https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.css", + js: '', + css: 'https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css', }, - {js:'https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.min.js',css:''} - ]; + { + js: '', + css: 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css', + }, + ] } const webpackConfig = merge(baseWebpackConfig, { @@ -72,13 +74,13 @@ const webpackConfig = merge(baseWebpackConfig, { devtool: config.build.productionSourceMap ? config.build.devtool : false, output: { path: config.build.assetsRoot, - filename: utils.assetsPath("js/[name].[chunkhash].js"), - chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"), + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'), }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ - "process.env": env, + 'process.env': env, }), new UglifyJsPlugin({ uglifyOptions: { @@ -91,7 +93,7 @@ const webpackConfig = merge(baseWebpackConfig, { }), // extract css into its own file new ExtractTextPlugin({ - filename: utils.assetsPath("css/[name].[contenthash].css"), + filename: utils.assetsPath('css/[name].[contenthash].css'), // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, @@ -102,16 +104,16 @@ const webpackConfig = merge(baseWebpackConfig, { // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap - ? { safe: true, map: { inline: false } } - : { safe: true }, + ? {safe: true, map: {inline: false}} + : {safe: true}, }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: - process.env.NODE_ENV === "testing" ? "index.html" : config.build.index, - template: "index.html", + process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, + template: 'index.html', inject: true, minify: { removeComments: true, @@ -121,7 +123,7 @@ const webpackConfig = merge(baseWebpackConfig, { // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: "dependency", + chunksSortMode: 'dependency', cdnConfig: externalConfig, // cdn配置 onlyCss: true, //dev下只加载css }), @@ -131,28 +133,28 @@ const webpackConfig = merge(baseWebpackConfig, { new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ - name: "vendor", - minChunks(module) { + name: 'vendor', + minChunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && - module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0 - ); + module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 + ) }, }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ - name: "manifest", + name: 'manifest', minChunks: Infinity, }), // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ - name: "app", - async: "vendor-async", + name: 'app', + async: 'vendor-async', children: true, minChunks: 3, }), @@ -160,37 +162,37 @@ const webpackConfig = merge(baseWebpackConfig, { // copy custom myblog_static assets new CopyWebpackPlugin([ { - from: path.resolve(__dirname, "../myblog_static"), + from: path.resolve(__dirname, '../myblog_static'), to: config.build.assetsSubDirectory, - ignore: [".*"], + ignore: ['.*'], }, ]), ], -}); +}) if (config.build.productionGzip) { - const CompressionWebpackPlugin = require("compression-webpack-plugin"); + const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ - filename: "[path].gz[query]", - algorithm: "gzip", + filename: '[path].gz[query]', + algorithm: 'gzip', test: new RegExp( - "\\.(" + config.build.productionGzipExtensions.join("|") + ")$" + '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8, }) - ); + ) } if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = - require("webpack-bundle-analyzer").BundleAnalyzerPlugin; - webpackConfig.plugins.push(new BundleAnalyzerPlugin()); + require('webpack-bundle-analyzer').BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } if (config.build.isIgnoreLogs) { - const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + const UglifyJsPlugin = require('uglifyjs-webpack-plugin') let optimization = [ new UglifyJsPlugin({ uglifyOptions: { @@ -198,14 +200,14 @@ if (config.build.isIgnoreLogs) { warnings: false, drop_debugger: true, //去掉debugger drop_console: true, // 去掉console - pure_funcs: ["console.log"], // 移除console + pure_funcs: ['console.log'], // 移除console }, }, sourceMap: config.build.productionSourceMap, parallel: true, }), - ]; - webpackConfig.plugins.push(...optimization); + ] + webpackConfig.plugins.push(...optimization) } -module.exports = webpackConfig; +module.exports = webpackConfig diff --git a/index.html b/index.html index c41bc2b3209fec467f2367ca56d2847f3463dc87..8db69e91256e3195da9edead03181ba85238a0e2 100644 --- a/index.html +++ b/index.html @@ -20,11 +20,12 @@ overflow: hidden; } - + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %> <% }}) %> + - - <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %> + + + + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %> <% }}) %> -
diff --git a/myblog_static/utils/fx_background/image/background.png b/myblog_static/utils/fx_background/image/background.png index f5080dd72c807454cb042d1a0e65b54b3739f6c3..46c8a807b7746181b878d87373db8e43739f9166 100644 Binary files a/myblog_static/utils/fx_background/image/background.png and b/myblog_static/utils/fx_background/image/background.png differ diff --git a/myblog_static/utils/fx_background/image/gg.jpg b/myblog_static/utils/fx_background/image/gg.jpg index 732d131f81bc387fd4219440703da42d661201d7..c7af20344e5d99d7138ae8401ff2b72e92cbe4e0 100644 Binary files a/myblog_static/utils/fx_background/image/gg.jpg and b/myblog_static/utils/fx_background/image/gg.jpg differ diff --git a/myblog_static/utils/fx_background/image/img_fbx.jpg b/myblog_static/utils/fx_background/image/img_fbx.jpg deleted file mode 100644 index 3e9a71f784d95c4ce0ef49dd8d2456505db642c7..0000000000000000000000000000000000000000 Binary files a/myblog_static/utils/fx_background/image/img_fbx.jpg and /dev/null differ diff --git a/myblog_static/utils/fx_background/image/previewFix.jpg b/myblog_static/utils/fx_background/image/previewFix.jpg index 9b17c73cafb228841130e3d26216d3acc2f7754b..61e003894dc2b7e59cee3e5cb8049f20b7b88e3f 100644 Binary files a/myblog_static/utils/fx_background/image/previewFix.jpg and b/myblog_static/utils/fx_background/image/previewFix.jpg differ diff --git a/package.json b/package.json index 8c5e1752af49c409922e6ab07e1c6fdbcfc02c6a..8717aed8ad9793412da35328683bca965099d15d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "element-ui": "^2.14.1", "github-markdown-css": "^4.0.0", "highlight.js": "^10.5.0", + "image-webpack-loader": "^8.1.0", "js-cookie": "^3.0.1", "nprogress": "^0.2.0", "vue": "^2.5.2", diff --git a/src/main.js b/src/main.js index 2ede905a21b43047433293b85740569177deeb41..caa22f0e26e5495719d8d347704e27613a3849e5 100644 --- a/src/main.js +++ b/src/main.js @@ -3,16 +3,17 @@ // import Vue from 'vue' // import VueRouter from 'vue-router' // import axios from 'axios' -// import cookies from 'vue-cookies' // import hljs from 'highlight.js' import useRouter from './router' +import cookies from 'vue-cookies' import App from './App' -import importElementComponents from './importElement' -import importEchartsComponents from './importEchartsComponents' +// import importElementComponents from './importElement' +// import importEchartsComponents from './importEchartsComponents' // 样式 // import 'github-markdown-css/github-markdown.css' +// import 'nprogress/nprogress.css' import 'highlight.js/styles/github.css' -import 'nprogress/nprogress.css' + const env = process.env.NODE_ENV // 生产环境 @@ -21,11 +22,11 @@ if (env === 'production') { // 路由 const router = useRouter(Vue, VueRouter) - // 按需引入elementui - importElementComponents(Vue) - - // 按需引入echarts - importEchartsComponents(Vue) + // // 按需引入elementui + // importElementComponents(Vue) + // + // // 按需引入echarts + // importEchartsComponents(Vue) Vue.config.productionTip = false Vue.use(cookies)