From 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 31 Mar 2017 20:21:41 +0200 Subject: Adds Webpack support and removes the use for Grunt Signed-off-by: Thomas Citharel use scss Signed-off-by: Thomas Citharel fix build, add babel, fix annotations fixes (and improvements !) for baggy add live reload & environments & eslint & theme fixes --- app/config/webpack/common.js | 40 ++++++++++++++++++ app/config/webpack/dev.js | 62 +++++++++++++++++++++++++++ app/config/webpack/prod.js | 99 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 201 insertions(+) create mode 100644 app/config/webpack/common.js create mode 100644 app/config/webpack/dev.js create mode 100644 app/config/webpack/prod.js (limited to 'app/config/webpack') diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js new file mode 100644 index 00000000..4f5739f0 --- /dev/null +++ b/app/config/webpack/common.js @@ -0,0 +1,40 @@ +const path = require('path'); +const webpack = require('webpack'); +const StyleLintPlugin = require('stylelint-webpack-plugin'); + +const rootDir = path.resolve(__dirname, '../../../'); + +module.exports = function() { + return { + entry: { + material: path.join(rootDir, './app/Resources/static/themes/material/index.js'), + baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'), + }, + + output: { + filename: '[name].js', + path: path.resolve(rootDir, 'web/bundles/wallabagcore'), + publicPath: '/bundles/wallabagcore/', + }, + plugins: [ + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + 'window.$': 'jquery', + 'window.jQuery': 'jquery' + }), + new StyleLintPlugin({ + configFile: '.stylelintrc', + failOnError: false, + quiet: false, + context: 'app/Resources/static/themes', + files: '**/*.scss', + }), + ], + resolve: { + alias: { + jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js') + } + }, + }; +}; diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js new file mode 100644 index 00000000..771df65b --- /dev/null +++ b/app/config/webpack/dev.js @@ -0,0 +1,62 @@ +const webpackMerge = require('webpack-merge'); +const webpack = require('webpack'); +const path = require('path'); +const commonConfig = require('./common.js'); + +module.exports = function () { + return webpackMerge(commonConfig(), { + devtool: 'eval-source-map', + output: { + filename: '[name].dev.js' + }, + + devServer: { + hot: true, + // enable HMR on the server + + contentBase: './web', + // match the output path + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + ], + module: { + rules: [ + { + enforce: 'pre', + test: /\.js$/, + loader: 'eslint-loader', + exclude: /node_modules/, + }, + { + test: /\.js$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader', + options: { + presets: ['env'] + } + } + }, + { + test: /\.(s)?css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + } + }, + 'postcss-loader', + 'sass-loader' + ] + }, + { + test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/, + use: 'url-loader' + }, + ] + }, + }) +}; diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js new file mode 100644 index 00000000..ef41ab99 --- /dev/null +++ b/app/config/webpack/prod.js @@ -0,0 +1,99 @@ +const webpack = require('webpack'); +const webpackMerge = require('webpack-merge'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const ManifestPlugin = require('webpack-manifest-plugin'); + +const commonConfig = require('./common.js'); + +module.exports = function() { + return webpackMerge(commonConfig(), { + output: { + filename: '[name].js' + }, + devtool: 'source-map', + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': JSON.stringify('production') + } + }), + new webpack.optimize.UglifyJsPlugin({ + beautify: false, + mangle: { + screw_ie8: true, + keep_fnames: true + }, + compress: { + screw_ie8: true, + warnings: false + }, + comments: false + }), + new ExtractTextPlugin('[name].css'), + new ManifestPlugin({ + fileName: 'manifest.json', + }) + ], + module: { + rules: [ + { + enforce: 'pre', + test: /\.js$/, + loader: 'eslint-loader', + exclude: /node_modules/, + }, + { + test: /\.js$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader', + options: { + presets: ['env'] + } + } + }, + { + test: /\.(s)?css$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + { + loader: 'css-loader', + options: { + importLoaders: 1, + minimize: { + discardComments: { + removeAll: true + }, + core: true, + minifyFontValues: true + } + } + }, + 'postcss-loader', + 'sass-loader' + ] + }) + }, + { + test: /\.(jpg|png|gif|svg)$/, + use: { + loader: 'file-loader', + options: { + name: 'img/[name].[ext]', + } + } + }, + { + test: /\.(eot|ttf|woff|woff2)$/, + use: { + loader: 'file-loader', + options: { + name: 'fonts/[name].[ext]', + } + } + } + ] + }, + }) +}; -- cgit v1.2.3 From 789c46821db9fbab5bbea99846fa0021d779a592 Mon Sep 17 00:00:00 2001 From: Jeremy Benoist Date: Tue, 20 Jun 2017 07:14:04 +0200 Subject: Fix linter issue on webpack config files --- app/config/webpack/common.js | 9 ++++---- app/config/webpack/dev.js | 23 ++++++++++---------- app/config/webpack/prod.js | 50 ++++++++++++++++++++++---------------------- 3 files changed, 40 insertions(+), 42 deletions(-) (limited to 'app/config/webpack') diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js index 4f5739f0..1ef193c7 100644 --- a/app/config/webpack/common.js +++ b/app/config/webpack/common.js @@ -4,13 +4,12 @@ const StyleLintPlugin = require('stylelint-webpack-plugin'); const rootDir = path.resolve(__dirname, '../../../'); -module.exports = function() { +module.exports = function () { return { entry: { material: path.join(rootDir, './app/Resources/static/themes/material/index.js'), baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'), }, - output: { filename: '[name].js', path: path.resolve(rootDir, 'web/bundles/wallabagcore'), @@ -21,7 +20,7 @@ module.exports = function() { $: 'jquery', jQuery: 'jquery', 'window.$': 'jquery', - 'window.jQuery': 'jquery' + 'window.jQuery': 'jquery', }), new StyleLintPlugin({ configFile: '.stylelintrc', @@ -33,8 +32,8 @@ module.exports = function() { ], resolve: { alias: { - jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js') - } + jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js'), + }, }, }; }; diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js index 771df65b..b6551152 100644 --- a/app/config/webpack/dev.js +++ b/app/config/webpack/dev.js @@ -1,13 +1,12 @@ const webpackMerge = require('webpack-merge'); const webpack = require('webpack'); -const path = require('path'); const commonConfig = require('./common.js'); module.exports = function () { return webpackMerge(commonConfig(), { devtool: 'eval-source-map', output: { - filename: '[name].dev.js' + filename: '[name].dev.js', }, devServer: { @@ -34,9 +33,9 @@ module.exports = function () { use: { loader: 'babel-loader', options: { - presets: ['env'] - } - } + presets: ['env'], + }, + }, }, { test: /\.(s)?css$/, @@ -46,17 +45,17 @@ module.exports = function () { loader: 'css-loader', options: { importLoaders: 1, - } + }, }, - 'postcss-loader', - 'sass-loader' - ] + 'postcss-loader', + 'sass-loader', + ], }, { test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/, - use: 'url-loader' + use: 'url-loader', }, - ] + ], }, - }) + }); }; diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js index ef41ab99..44961cc5 100644 --- a/app/config/webpack/prod.js +++ b/app/config/webpack/prod.js @@ -5,34 +5,34 @@ const ManifestPlugin = require('webpack-manifest-plugin'); const commonConfig = require('./common.js'); -module.exports = function() { +module.exports = function () { return webpackMerge(commonConfig(), { output: { - filename: '[name].js' + filename: '[name].js', }, devtool: 'source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': { - 'NODE_ENV': JSON.stringify('production') - } + 'NODE_ENV': JSON.stringify('production'), + }, }), new webpack.optimize.UglifyJsPlugin({ beautify: false, mangle: { screw_ie8: true, - keep_fnames: true + keep_fnames: true, }, compress: { screw_ie8: true, - warnings: false + warnings: false, }, - comments: false + comments: false, }), new ExtractTextPlugin('[name].css'), new ManifestPlugin({ fileName: 'manifest.json', - }) + }), ], module: { rules: [ @@ -48,9 +48,9 @@ module.exports = function() { use: { loader: 'babel-loader', options: { - presets: ['env'] - } - } + presets: ['env'], + }, + }, }, { test: /\.(s)?css$/, @@ -63,17 +63,17 @@ module.exports = function() { importLoaders: 1, minimize: { discardComments: { - removeAll: true + removeAll: true, }, core: true, - minifyFontValues: true - } - } + minifyFontValues: true, + }, + }, }, 'postcss-loader', - 'sass-loader' - ] - }) + 'sass-loader', + ], + }), }, { test: /\.(jpg|png|gif|svg)$/, @@ -81,8 +81,8 @@ module.exports = function() { loader: 'file-loader', options: { name: 'img/[name].[ext]', - } - } + }, + }, }, { test: /\.(eot|ttf|woff|woff2)$/, @@ -90,10 +90,10 @@ module.exports = function() { loader: 'file-loader', options: { name: 'fonts/[name].[ext]', - } - } - } - ] + }, + }, + }, + ], }, - }) + }); }; -- cgit v1.2.3 From 77255d668828d7ae4cceb186b5215a0d4ddd69f6 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 22 Jun 2017 12:15:24 +0200 Subject: Add css on share public page --- app/config/webpack/common.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/config/webpack') diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js index 1ef193c7..c497689a 100644 --- a/app/config/webpack/common.js +++ b/app/config/webpack/common.js @@ -9,6 +9,7 @@ module.exports = function () { entry: { material: path.join(rootDir, './app/Resources/static/themes/material/index.js'), baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'), + public: path.join(rootDir, './app/Resources/static/themes/_global/share.js'), }, output: { filename: '[name].js', -- cgit v1.2.3 From 7a1e1247cbc3b7a68c82c45733713c4630e9dcb7 Mon Sep 17 00:00:00 2001 From: Kevin Decherf Date: Sun, 15 Oct 2017 23:57:35 +0200 Subject: webpack: handle _global img folder Fixes missing image files after composer cleaning assets Source of requireAll(): https://stackoverflow.com/a/30652110 Signed-off-by: Kevin Decherf --- app/config/webpack/prod.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'app/config/webpack') diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js index 44961cc5..17b8c384 100644 --- a/app/config/webpack/prod.js +++ b/app/config/webpack/prod.js @@ -76,7 +76,8 @@ module.exports = function () { }), }, { - test: /\.(jpg|png|gif|svg)$/, + test: /\.(jpg|png|gif|svg|ico)$/, + include: /node_modules/, use: { loader: 'file-loader', options: { @@ -84,6 +85,17 @@ module.exports = function () { }, }, }, + { + test: /\.(jpg|png|gif|svg|ico)$/, + exclude: /node_modules/, + use: { + loader: 'file-loader', + options: { + context: 'app/Resources/static', + name: '[path][name].[ext]', + }, + }, + }, { test: /\.(eot|ttf|woff|woff2)$/, use: { -- cgit v1.2.3 From 3f29386cb797a8cc9b4eff8dc9b0a75f201366a5 Mon Sep 17 00:00:00 2001 From: Kevin Decherf Date: Mon, 16 Oct 2017 00:07:12 +0200 Subject: Update prod assets Signed-off-by: Kevin Decherf --- app/config/webpack/dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/config/webpack') diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js index b6551152..97abc5eb 100644 --- a/app/config/webpack/dev.js +++ b/app/config/webpack/dev.js @@ -52,7 +52,7 @@ module.exports = function () { ], }, { - test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/, + test: /\.(jpg|png|gif|svg|ico|eot|ttf|woff|woff2)$/, use: 'url-loader', }, ], -- cgit v1.2.3