diff --git a/assets/config.json b/assets/config.json index c394d8e338..88d3ab7616 100644 --- a/assets/config.json +++ b/assets/config.json @@ -1,5 +1,4 @@ { - "context": "assets", "entry": { "main": [ "./scripts/main.js", @@ -9,10 +8,6 @@ "./scripts/customizer.js" ] }, - "output": { - "path": "dist", - "publicPath": "/app/themes/sage/dist/" - }, - "devUrl": "http://example.dev", - "devPort": 3000 + "publicPath": "/app/themes/sage", + "devUrl": "http://example.dev" } diff --git a/webpack.config.js b/webpack.config.js index c738ed43ee..13658fd7a4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,6 +17,8 @@ var config = require('./assets/config'); var scriptsFilename = (argv.release) ? 'scripts/[name]_[hash].js' : 'scripts/[name].js', stylesFilename = (argv.release) ? 'styles/[name]_[hash].css' : 'styles/[name].css', sourceMapQueryStr = (argv.release) ? '-sourceMap' : '+sourceMap', + assets = 'assets/', + dist = 'dist/', jsLoader, webpackConfig; @@ -83,18 +85,18 @@ var addHotMiddleware = function (entry) { }; webpackConfig = { - context: path.resolve(config.context), + context: path.resolve(assets), entry: config.entry, output: { - path: path.join(__dirname, config.output.path), - publicPath: config.output.publicPath, + path: path.join(__dirname, dist), + publicPath: path.join(config.publicPath, dist), filename: scriptsFilename }, module: { preLoaders: [ { test: /\.js?$/, - include: path.resolve('assets'), + include: path.resolve(assets), loader: 'eslint' } ], @@ -102,6 +104,7 @@ webpackConfig = { jsLoader, { test: /\.css$/, + include: path.resolve(assets), loader: ExtractTextPlugin.extract('style', [ 'css?' + sourceMapQueryStr, 'postcss' @@ -109,6 +112,7 @@ webpackConfig = { }, { test: /\.scss$/, + include: path.resolve(assets), loader: ExtractTextPlugin.extract('style', [ 'css?' + sourceMapQueryStr, 'postcss', @@ -117,13 +121,14 @@ webpackConfig = { ]) }, { - test: /\.(png|jpg|jpeg|gif)(\?.*)?$/, + test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/, + include: path.resolve(assets), loaders: [ 'file?' + qs.stringify({ - name: 'images/[name]_[md5:hash:hex:8].[ext]' + name: '[path][name].[ext]' }), 'image-webpack?' + JSON.stringify({ - bypassOnDebug:true, + bypassOnDebug: true, progressive: true, optimizationLevel: 7, interlaced: true, @@ -139,17 +144,27 @@ webpackConfig = { ] }, { - test: /\.(ttf|eot|svg)(\?.*)?$/, + test: /\.(ttf|eot)(\?.*)?$/, + include: path.resolve(assets), loader: 'file?' + qs.stringify({ - name: 'fonts/[name]_[md5:hash:hex:8].[ext]' + name: '[path][name]_[md5:hash:hex:8].[ext]' }) }, { test: /\.woff(2)?(\?.*)?$/, + include: path.resolve(assets), loader: 'url?' + qs.stringify({ limit: 10000, mimetype: "application/font-woff", - name: "fonts/[name]_[md5:hash:hex:8].[ext]" + name: "[path][name]_[md5:hash:hex:8].[ext]" + }) + }, + // Use file-loader for node_modules/ assets + { + test: /\.(ttf|eot|woff(2)?|png|jpg|jpeg|gif|svg)(\?.*)?$/, + include: /node_modules/, + loader: 'file?' + qs.stringify({ + name: 'vendor/[name]_[md5:hash:hex:8].[ext]' }) } ] @@ -165,7 +180,7 @@ webpackConfig = { jquery: 'jQuery' }, plugins: [ - new Clean([config.output.path]), + new Clean([dist]), new ExtractTextPlugin(stylesFilename, { allChunks: true, disable: (argv.watch === true) // '--watch' disable ExtractTextPlugin @@ -210,7 +225,7 @@ if (argv.watch) { // '--release' to push additional plugins to webpackConfig if (argv.release) { webpackConfig.plugins.push(new AssetsPlugin({ - path: path.join(__dirname, config.output.path), + path: path.join(__dirname, dist), filename: 'assets.json', fullPath: false, processOutput: assetsPluginProcessOutput