aboutsummaryrefslogtreecommitdiff
path: root/build
diff options
context:
space:
mode:
Diffstat (limited to 'build')
-rw-r--r--build/utils.js75
-rw-r--r--build/webpack.base.conf.js76
-rw-r--r--build/webpack.dev.conf.js4
-rw-r--r--build/webpack.prod.conf.js44
4 files changed, 84 insertions, 115 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..6f6e785b 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -21,8 +21,10 @@ module.exports = {
filename: '[name].js'
},
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 +32,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..80b87ae8 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -12,7 +12,7 @@ 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 })
},
// eval-source-map is faster for development
devtool: '#eval-source-map',
@@ -23,9 +23,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..85ea1bee 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,24 +13,22 @@ 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, {
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
+ },
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
- })
- },
plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
new webpack.DefinePlugin({
@@ -38,14 +36,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 +61,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']
+ // }),
]
})