diff --git a/build/utils.js b/build/utils.js index e534fb0..2d640e2 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,7 +1,7 @@ 'use strict' const path = require('path') const config = require('../config') -const ExtractTextPlugin = require('extract-text-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') const packageConfig = require('../package.json') exports.assetsPath = function (_path) { @@ -31,7 +31,22 @@ exports.cssLoaders = function (options) { // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { - const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] + const loaders = [] + + // Extract CSS when that option is specified + // (which is the case during production build) + if (options.extract) { + loaders.push(MiniCssExtractPlugin.loader) + } + else { + loaders.push('vue-style-loader') + } + + loaders.push(cssLoader) + + if (options.usePostCSS) { + loaders.push(postcssLoader) + } if (loader) { loaders.push({ @@ -42,16 +57,7 @@ exports.cssLoaders = function (options) { }) } - // Extract CSS when that option is specified - // (which is the case during production build) - if (options.extract) { - return ExtractTextPlugin.extract({ - use: loaders, - fallback: 'vue-style-loader' - }) - } else { - return ['vue-style-loader'].concat(loaders) - } + return loaders } // https://vue-loader.vuejs.org/en/configurations/extract-css.html diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 212d081..0420662 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -17,6 +17,7 @@ const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) const devWebpackConfig = merge(baseWebpackConfig, { + mode: 'development', module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, @@ -47,8 +48,6 @@ const devWebpackConfig = merge(baseWebpackConfig, { 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), - new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. - new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', diff --git a/package.json b/package.json index a14328b..4cd3436 100644 --- a/package.json +++ b/package.json @@ -13,60 +13,61 @@ "test": "npm run lint" }, "dependencies": { - "axios": "0.17.1", - "element-ui": "2.3.4", + "axios": "0.18.0", + "element-ui": "2.4.4", "js-cookie": "2.2.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", "vue": "2.5.10", "vue-router": "3.0.1", - "vuex": "3.0.1" + "vuex": "3.0.1", + "webpack-cli": "^3.0.8" }, "devDependencies": { - "autoprefixer": "7.2.3", + "autoprefixer": "8.5.0", "babel-core": "6.26.0", - "babel-eslint": "8.0.3", + "babel-eslint": "8.2.6", "babel-helper-vue-jsx-merge-props": "2.0.3", - "babel-loader": "7.1.2", + "babel-loader": "7.1.5", "babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-transform-runtime": "6.23.0", - "babel-plugin-transform-vue-jsx": "3.5.0", - "babel-preset-env": "1.6.1", + "babel-plugin-transform-vue-jsx": "3.7.0", + "babel-preset-env": "1.7.0", "babel-preset-stage-2": "6.24.1", - "chalk": "2.3.0", - "copy-webpack-plugin": "4.2.3", + "chalk": "2.4.1", + "copy-webpack-plugin": "4.5.2", "css-loader": "0.28.7", - "eslint": "4.13.1", - "eslint-friendly-formatter": "3.0.0", - "eslint-loader": "1.9.0", - "eslint-plugin-html": "4.0.1", + "eslint": "4.19.1", + "eslint-friendly-formatter": "4.0.1", + "eslint-loader": "2.0.0", + "eslint-plugin-html": "4.0.5", "eventsource-polyfill": "0.9.6", - "extract-text-webpack-plugin": "3.0.2", - "file-loader": "1.1.5", - "friendly-errors-webpack-plugin": "1.6.1", - "html-webpack-plugin": "2.30.1", - "node-notifier": "5.1.2", + "file-loader": "1.1.11", + "friendly-errors-webpack-plugin": "1.7.0", + "html-webpack-plugin": "3.2.0", + "mini-css-extract-plugin": "0.4.1", + "node-notifier": "5.2.1", "node-sass": "^4.7.2", - "optimize-css-assets-webpack-plugin": "3.2.0", - "ora": "1.3.0", + "optimize-css-assets-webpack-plugin": "5.0.0", + "ora": "2.1.0", "portfinder": "1.0.13", "postcss-import": "11.0.0", - "postcss-loader": "2.0.9", - "postcss-url": "7.3.0", + "postcss-loader": "2.1.6", + "postcss-url": "7.3.2", "rimraf": "2.6.2", - "sass-loader": "6.0.6", - "semver": "5.4.1", - "shelljs": "0.7.8", - "svg-sprite-loader": "3.5.2", - "uglifyjs-webpack-plugin": "1.1.3", - "url-loader": "0.6.2", - "vue-loader": "13.7.2", + "sass-loader": "7.0.3", + "semver": "5.5.0", + "shelljs": "0.8.2", + "svg-sprite-loader": "3.8.0", + "uglifyjs-webpack-plugin": "1.2.7", + "url-loader": "1.0.1", + "vue-loader": "14.2.2", "vue-style-loader": "3.0.3", "vue-template-compiler": "2.5.10", - "webpack": "3.10.0", - "webpack-bundle-analyzer": "2.9.1", - "webpack-dev-server": "2.9.7", - "webpack-merge": "4.1.1" + "webpack": "4.16.1", + "webpack-bundle-analyzer": "2.13.1", + "webpack-dev-server": "3.1.4", + "webpack-merge": "4.1.3" }, "engines": { "node": ">= 4.0.0",