diff options
Diffstat (limited to 'build')
| -rw-r--r-- | build/utils.js | 75 | ||||
| -rw-r--r-- | build/webpack.base.conf.js | 81 | ||||
| -rw-r--r-- | build/webpack.dev.conf.js | 5 | ||||
| -rw-r--r-- | build/webpack.prod.conf.js | 50 |
4 files changed, 95 insertions, 116 deletions
diff --git a/build/utils.js b/build/utils.js index 5b90db14..3beee774 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,61 +1,64 @@ var path = require('path') var config = require('../config') -var ExtractTextPlugin = require('extract-text-webpack-plugin') +var sass = require('sass') +var MiniCssExtractPlugin = require('mini-css-extract-plugin') exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production' - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } exports.cssLoaders = function (options) { options = options || {} - // generate loader string to be used with extract text plugin - function generateLoaders (loaders) { - var sourceLoader = loaders.map(function (loader) { - var extraParamChar - if (/\?/.test(loader)) { - loader = loader.replace(/\?/, '-loader?') - extraParamChar = '&' - } else { - loader = loader + '-loader' - extraParamChar = '?' - } - return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') - }).join('!') + function generateLoaders (loaders) { // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { - return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) + return [MiniCssExtractPlugin.loader].concat(loaders) } else { - return ['vue-style-loader', sourceLoader].join('!') + return ['vue-style-loader'].concat(loaders) } } // http://vuejs.github.io/vue-loader/configurations/extract-css.html - return { - css: generateLoaders(['css']), - postcss: generateLoaders(['css']), - less: generateLoaders(['css', 'less']), - sass: generateLoaders(['css', 'sass?indentedSyntax']), - scss: generateLoaders(['css', 'sass']), - stylus: generateLoaders(['css', 'stylus']), - styl: generateLoaders(['css', 'stylus']) - } + return [ + { + test: /\.(post)?css$/, + use: generateLoaders(['css-loader']), + }, + { + test: /\.less$/, + use: generateLoaders(['css-loader', 'less-loader']), + }, + { + test: /\.sass$/, + use: generateLoaders([ + 'css-loader', + { + loader: 'sass-loader', + options: { + indentedSyntax: true + } + } + ]) + }, + { + test: /\.scss$/, + use: generateLoaders(['css-loader', 'sass-loader']) + }, + { + test: /\.styl(us)?$/, + use: generateLoaders(['css-loader', 'stylus-loader']), + }, + ] } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { - var output = [] - var loaders = exports.cssLoaders(options) - for (var extension in loaders) { - var loader = loaders[extension] - output.push({ - test: new RegExp('\\.' + extension + '$'), - loader: loader - }) - } + var output = exports.cssLoaders(options) + console.log(output) return output } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index e07bb7a2..f8968966 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -20,9 +20,16 @@ module.exports = { publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' }, + optimization: { + splitChunks: { + chunks: 'all' + } + }, resolve: { - extensions: ['', '.js', '.vue'], - fallback: [path.join(__dirname, '../node_modules')], + extensions: ['.js', '.vue'], + modules: [ + path.join(__dirname, '../node_modules') + ], alias: { 'vue$': 'vue/dist/vue.runtime.common', 'src': path.resolve(__dirname, '../src'), @@ -30,67 +37,53 @@ module.exports = { 'components': path.resolve(__dirname, '../src/components') } }, - resolveLoader: { - fallback: [path.join(__dirname, '../node_modules')] - }, module: { noParse: /node_modules\/localforage\/dist\/localforage.js/, - preLoaders: [ + rules: [ { - test: /\.vue$/, - loader: 'eslint', + enforce: 'pre', + test: /\.(js|vue)$/, include: projectRoot, - exclude: /node_modules/ + exclude: /node_modules/, + use: { + loader: 'eslint-loader', + options: { + formatter: require('eslint-friendly-formatter'), + sourceMap: config.build.productionSourceMap, + extract: true + } + } }, { - test: /\.js$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - } - ], - loaders: [ - { test: /\.vue$/, - loader: 'vue' + use: 'vue-loader' }, { test: /\.jsx?$/, - loader: 'babel', include: projectRoot, - exclude: /node_modules\/(?!tributejs)/ - }, - { - test: /\.json$/, - loader: 'json' + exclude: /node_modules\/(?!tributejs)/, + use: 'babel-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') + use: { + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + use: { + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } } - } - ] - }, - eslint: { - formatter: require('eslint-friendly-formatter') - }, - vue: { - loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), - postcss: [ - require('autoprefixer')({ - browsers: ['last 2 versions'] - }) + }, ] }, plugins: [ diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 9f34619c..159572ba 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -12,8 +12,9 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) { module.exports = merge(baseWebpackConfig, { module: { - loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, + mode: 'development', // eval-source-map is faster for development devtool: '#eval-source-map', plugins: [ @@ -23,9 +24,7 @@ module.exports = merge(baseWebpackConfig, { 'DEV_OVERRIDES': JSON.stringify(config.dev.settings) }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage - new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 9699f221..e7d25bfe 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -4,7 +4,7 @@ var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') -var ExtractTextPlugin = require('extract-text-webpack-plugin') +var MiniCssExtractPlugin = require('mini-css-extract-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') @@ -13,23 +13,25 @@ var env = process.env.NODE_ENV === 'testing' let commitHash = require('child_process') .execSync('git rev-parse --short HEAD') .toString(); + console.log(commitHash) var webpackConfig = merge(baseWebpackConfig, { + mode: 'production', module: { - loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, + optimization: { + minimize: true, + splitChunks: { + chunks: 'all' + } + }, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') - }, - vue: { - loaders: utils.cssLoaders({ - sourceMap: config.build.productionSourceMap, - extract: true - }) + chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') }, plugins: [ // http://vuejs.github.io/vue-loader/workflow/production.html @@ -38,14 +40,10 @@ var webpackConfig = merge(baseWebpackConfig, { 'COMMIT_HASH': JSON.stringify(commitHash), 'DEV_OVERRIDES': JSON.stringify(undefined) }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - new webpack.optimize.OccurenceOrderPlugin(), // extract css into its own file - new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), + new MiniCssExtractPlugin({ + filename: utils.assetsPath('css/[name].[contenthash].css') + }), // 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 @@ -67,25 +65,11 @@ var webpackConfig = merge(baseWebpackConfig, { chunksSortMode: 'dependency' }), // split vendor js into its own file - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module, count) { - // 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 - ) - } - }), // 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', - chunks: ['vendor'] - }) + // new webpack.optimize.SplitChunksPlugin({ + // name: ['app', 'vendor'] + // }), ] }) |