diff --git a/templates/VueSpa/webpack.config.js b/templates/VueSpa/webpack.config.js index d4153779..80cc6e2a 100644 --- a/templates/VueSpa/webpack.config.js +++ b/templates/VueSpa/webpack.config.js @@ -1,13 +1,13 @@ const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const extractCSS = new ExtractTextPlugin('site.css'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const bundleOutputDir = './wwwroot/dist'; module.exports = (env) => { const isDevBuild = !(env && env.prod); - const bundleOutputDir = './wwwroot/dist'; return [{ stats: { modules: false }, context: __dirname, @@ -17,22 +17,20 @@ module.exports = (env) => { rules: [ { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } }, { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, - { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, + { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : extractCSS.extract({ use: 'css-loader?minimize' }) }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, output: { path: path.join(__dirname, bundleOutputDir), - filename: '[name].js', - publicPath: '/dist/' + publicPath: '/dist/', + filename: '[name].js' }, plugins: [ - new CheckerPlugin(), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production') - } + new webpack.EnvironmentPlugin({ + NODE_ENV: isDevBuild ? 'development' : 'production' }), + new CheckerPlugin(), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') @@ -46,7 +44,7 @@ module.exports = (env) => { ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin(), - new ExtractTextPlugin('site.css') + extractCSS ]) }]; }; diff --git a/templates/VueSpa/webpack.config.vendor.js b/templates/VueSpa/webpack.config.vendor.js index 2cd2af60..32e8021f 100644 --- a/templates/VueSpa/webpack.config.vendor.js +++ b/templates/VueSpa/webpack.config.vendor.js @@ -1,10 +1,11 @@ const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const extractCSS = new ExtractTextPlugin('vendor.css'); +const bundleOutputDir = './wwwroot/dist'; module.exports = (env) => { const isDevBuild = !(env && env.prod); - const extractCSS = new ExtractTextPlugin('vendor.css'); return [{ stats: { modules: false }, @@ -27,22 +28,27 @@ module.exports = (env) => { ] }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), + path: path.join(__dirname, bundleOutputDir), publicPath: '/dist/', filename: '[name].js', library: '[name]_[hash]' }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"' + new webpack.EnvironmentPlugin({ + NODE_ENV: isDevBuild ? 'development' : 'production' }), + new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), + path: path.join(__dirname, bundleOutputDir, '[name]-manifest.json'), name: '[name]_[hash]' }) - ].concat(isDevBuild ? [] : [ + ].concat(isDevBuild ? + [ + // Plugins that apply in development builds only + // (none setup for vendors bundle) + ] : [ + // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin() ]) }];