update webpack config. Closed #231

mrholek · mrholek · commit 26697b6d77d3 · 2017-08-10T13:37:44.000+02:00
diff --git a/Vue_Full_Project/build/utils.js b/Vue_Full_Project/build/utils.js
@@ -16,7 +16,8 @@ exports.cssLoaders = function (options) {
     loader: 'css-loader',
     options: {
       minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
+      sourceMap: options.sourceMap,
+      alias: { '../img': '../static/img' }
     }
   }
 
diff --git a/Vue_Full_Project/build/webpack.base.conf.js b/Vue_Full_Project/build/webpack.base.conf.js
@@ -48,18 +48,24 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash:7].[ext]',
+            publicPath: '../../',
+            outputPath: utils.assetsPath('img/')
+          }
         }
       },
       {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash:7].[ext]',
+            publicPath: '../../',
+            outputPath: utils.assetsPath('fonts/')
+          }
         }
       }
     ]
diff --git a/Vue_Full_Project/build/webpack.dev.conf.js b/Vue_Full_Project/build/webpack.dev.conf.js
@@ -1,8 +1,10 @@
+var path = require('path')
 var utils = require('./utils')
 var webpack = require('webpack')
 var config = require('../config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
@@ -30,6 +32,14 @@ module.exports = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true
     }),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin(),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
   ]
 })
diff --git a/Vue_Full_Project/config/index.js b/Vue_Full_Project/config/index.js
@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -26,7 +26,7 @@ module.exports = {
     port: 8080,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '',
     proxyTable: {},
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
diff --git a/Vue_Starter/build/utils.js b/Vue_Starter/build/utils.js
@@ -16,7 +16,8 @@ exports.cssLoaders = function (options) {
     loader: 'css-loader',
     options: {
       minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
+      sourceMap: options.sourceMap,
+      alias: { '../img': '../static/img' }
     }
   }
 
@@ -50,7 +51,7 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass'), 
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
diff --git a/Vue_Starter/build/webpack.base.conf.js b/Vue_Starter/build/webpack.base.conf.js
@@ -48,18 +48,24 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash:7].[ext]',
+            publicPath: '../../',
+            outputPath: utils.assetsPath('img/')
+          }
         }
       },
       {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash:7].[ext]',
+            publicPath: '../../',
+            outputPath: utils.assetsPath('fonts/')
+          }
         }
       }
     ]
diff --git a/Vue_Starter/build/webpack.dev.conf.js b/Vue_Starter/build/webpack.dev.conf.js
@@ -1,8 +1,10 @@
+var path = require('path')
 var utils = require('./utils')
 var webpack = require('webpack')
 var config = require('../config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
@@ -30,6 +32,14 @@ module.exports = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true
     }),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin(),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
   ]
 })
diff --git a/Vue_Starter/config/index.js b/Vue_Starter/config/index.js
@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -26,7 +26,7 @@ module.exports = {
     port: 8080,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '',
     proxyTable: {},
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,8 @@ exports.cssLoaders = function (options) {`
`16`	`16`	`loader: 'css-loader',`
`17`	`17`	`options: {`
`18`	`18`	`minimize: process.env.NODE_ENV === 'production',`
`19`		`- sourceMap: options.sourceMap`
	`19`	`+ sourceMap: options.sourceMap,`
	`20`	`+ alias: { '../img': '../static/img' }`
`20`	`21`	`}`
`21`	`22`	`}`
`22`	`23`
Original file line number	Diff line number	Diff line change
`@@ -48,18 +48,24 @@ module.exports = {`
`48`	`48`	`},`
`49`	`49`	`{`
`50`	`50`	`test: /\.(png\|jpe?g\|gif\|svg)(\?.*)?$/,`
`51`		`- loader: 'url-loader',`
`52`		`- options: {`
`53`		`- limit: 10000,`
`54`		`- name: utils.assetsPath('img/[name].[hash:7].[ext]')`
	`51`	`+ use: {`
	`52`	`+ loader: 'file-loader',`
	`53`	`+ options: {`
	`54`	`+ name: '[name].[hash:7].[ext]',`
	`55`	`+ publicPath: '../../',`
	`56`	`+ outputPath: utils.assetsPath('img/')`
	`57`	`+ }`
`55`	`58`	`}`
`56`	`59`	`},`
`57`	`60`	`{`
`58`		`- test: /\.(woff2?\|eot\|ttf\|otf)(\?.*)?$/,`
`59`		`- loader: 'url-loader',`
`60`		`- options: {`
`61`		`- limit: 10000,`
`62`		`- name: utils.assetsPath('fonts/[name].[hash:7].[ext]')`
	`61`	`+ test: /\.(woff2?\|ttf\|eot\|svg)(\?v=\d+\.\d+\.\d+)?$/,`
	`62`	`+ use: {`
	`63`	`+ loader: 'file-loader',`
	`64`	`+ options: {`
	`65`	`+ name: '[name].[hash:7].[ext]',`
	`66`	`+ publicPath: '../../',`
	`67`	`+ outputPath: utils.assetsPath('fonts/')`
	`68`	`+ }`
`63`	`69`	`}`
`64`	`70`	`}`
`65`	`71`	`]`