diff options
author | Thomas Citharel <tcit@tcit.fr> | 2017-03-31 20:21:41 +0200 |
---|---|---|
committer | Thomas Citharel <tcit@tcit.fr> | 2017-05-04 14:49:44 +0200 |
commit | 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a (patch) | |
tree | 6363a596055683587d11aaffcf30608a682988aa /app/config/webpack | |
parent | 3b4502e0e663866e7bac00164fd935fdc92309d6 (diff) | |
download | wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.gz wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.zst wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.zip |
Adds Webpack support and removes the use for Grunt
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
use scss
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
fix build, add babel, fix annotations
fixes (and improvements !) for baggy
add live reload & environments & eslint & theme fixes
Diffstat (limited to 'app/config/webpack')
-rw-r--r-- | app/config/webpack/common.js | 40 | ||||
-rw-r--r-- | app/config/webpack/dev.js | 62 | ||||
-rw-r--r-- | app/config/webpack/prod.js | 99 |
3 files changed, 201 insertions, 0 deletions
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 @@ | |||
1 | const path = require('path'); | ||
2 | const webpack = require('webpack'); | ||
3 | const StyleLintPlugin = require('stylelint-webpack-plugin'); | ||
4 | |||
5 | const rootDir = path.resolve(__dirname, '../../../'); | ||
6 | |||
7 | module.exports = function() { | ||
8 | return { | ||
9 | entry: { | ||
10 | material: path.join(rootDir, './app/Resources/static/themes/material/index.js'), | ||
11 | baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'), | ||
12 | }, | ||
13 | |||
14 | output: { | ||
15 | filename: '[name].js', | ||
16 | path: path.resolve(rootDir, 'web/bundles/wallabagcore'), | ||
17 | publicPath: '/bundles/wallabagcore/', | ||
18 | }, | ||
19 | plugins: [ | ||
20 | new webpack.ProvidePlugin({ | ||
21 | $: 'jquery', | ||
22 | jQuery: 'jquery', | ||
23 | 'window.$': 'jquery', | ||
24 | 'window.jQuery': 'jquery' | ||
25 | }), | ||
26 | new StyleLintPlugin({ | ||
27 | configFile: '.stylelintrc', | ||
28 | failOnError: false, | ||
29 | quiet: false, | ||
30 | context: 'app/Resources/static/themes', | ||
31 | files: '**/*.scss', | ||
32 | }), | ||
33 | ], | ||
34 | resolve: { | ||
35 | alias: { | ||
36 | jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js') | ||
37 | } | ||
38 | }, | ||
39 | }; | ||
40 | }; | ||
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 @@ | |||
1 | const webpackMerge = require('webpack-merge'); | ||
2 | const webpack = require('webpack'); | ||
3 | const path = require('path'); | ||
4 | const commonConfig = require('./common.js'); | ||
5 | |||
6 | module.exports = function () { | ||
7 | return webpackMerge(commonConfig(), { | ||
8 | devtool: 'eval-source-map', | ||
9 | output: { | ||
10 | filename: '[name].dev.js' | ||
11 | }, | ||
12 | |||
13 | devServer: { | ||
14 | hot: true, | ||
15 | // enable HMR on the server | ||
16 | |||
17 | contentBase: './web', | ||
18 | // match the output path | ||
19 | }, | ||
20 | plugins: [ | ||
21 | new webpack.HotModuleReplacementPlugin(), | ||
22 | ], | ||
23 | module: { | ||
24 | rules: [ | ||
25 | { | ||
26 | enforce: 'pre', | ||
27 | test: /\.js$/, | ||
28 | loader: 'eslint-loader', | ||
29 | exclude: /node_modules/, | ||
30 | }, | ||
31 | { | ||
32 | test: /\.js$/, | ||
33 | exclude: /(node_modules)/, | ||
34 | use: { | ||
35 | loader: 'babel-loader', | ||
36 | options: { | ||
37 | presets: ['env'] | ||
38 | } | ||
39 | } | ||
40 | }, | ||
41 | { | ||
42 | test: /\.(s)?css$/, | ||
43 | use: [ | ||
44 | 'style-loader', | ||
45 | { | ||
46 | loader: 'css-loader', | ||
47 | options: { | ||
48 | importLoaders: 1, | ||
49 | } | ||
50 | }, | ||
51 | 'postcss-loader', | ||
52 | 'sass-loader' | ||
53 | ] | ||
54 | }, | ||
55 | { | ||
56 | test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/, | ||
57 | use: 'url-loader' | ||
58 | }, | ||
59 | ] | ||
60 | }, | ||
61 | }) | ||
62 | }; | ||
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 @@ | |||
1 | const webpack = require('webpack'); | ||
2 | const webpackMerge = require('webpack-merge'); | ||
3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); | ||
4 | const ManifestPlugin = require('webpack-manifest-plugin'); | ||
5 | |||
6 | const commonConfig = require('./common.js'); | ||
7 | |||
8 | module.exports = function() { | ||
9 | return webpackMerge(commonConfig(), { | ||
10 | output: { | ||
11 | filename: '[name].js' | ||
12 | }, | ||
13 | devtool: 'source-map', | ||
14 | plugins: [ | ||
15 | new webpack.DefinePlugin({ | ||
16 | 'process.env': { | ||
17 | 'NODE_ENV': JSON.stringify('production') | ||
18 | } | ||
19 | }), | ||
20 | new webpack.optimize.UglifyJsPlugin({ | ||
21 | beautify: false, | ||
22 | mangle: { | ||
23 | screw_ie8: true, | ||
24 | keep_fnames: true | ||
25 | }, | ||
26 | compress: { | ||
27 | screw_ie8: true, | ||
28 | warnings: false | ||
29 | }, | ||
30 | comments: false | ||
31 | }), | ||
32 | new ExtractTextPlugin('[name].css'), | ||
33 | new ManifestPlugin({ | ||
34 | fileName: 'manifest.json', | ||
35 | }) | ||
36 | ], | ||
37 | module: { | ||
38 | rules: [ | ||
39 | { | ||
40 | enforce: 'pre', | ||
41 | test: /\.js$/, | ||
42 | loader: 'eslint-loader', | ||
43 | exclude: /node_modules/, | ||
44 | }, | ||
45 | { | ||
46 | test: /\.js$/, | ||
47 | exclude: /(node_modules)/, | ||
48 | use: { | ||
49 | loader: 'babel-loader', | ||
50 | options: { | ||
51 | presets: ['env'] | ||
52 | } | ||
53 | } | ||
54 | }, | ||
55 | { | ||
56 | test: /\.(s)?css$/, | ||
57 | use: ExtractTextPlugin.extract({ | ||
58 | fallback: 'style-loader', | ||
59 | use: [ | ||
60 | { | ||
61 | loader: 'css-loader', | ||
62 | options: { | ||
63 | importLoaders: 1, | ||
64 | minimize: { | ||
65 | discardComments: { | ||
66 | removeAll: true | ||
67 | }, | ||
68 | core: true, | ||
69 | minifyFontValues: true | ||
70 | } | ||
71 | } | ||
72 | }, | ||
73 | 'postcss-loader', | ||
74 | 'sass-loader' | ||
75 | ] | ||
76 | }) | ||
77 | }, | ||
78 | { | ||
79 | test: /\.(jpg|png|gif|svg)$/, | ||
80 | use: { | ||
81 | loader: 'file-loader', | ||
82 | options: { | ||
83 | name: 'img/[name].[ext]', | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | { | ||
88 | test: /\.(eot|ttf|woff|woff2)$/, | ||
89 | use: { | ||
90 | loader: 'file-loader', | ||
91 | options: { | ||
92 | name: 'fonts/[name].[ext]', | ||
93 | } | ||
94 | } | ||
95 | } | ||
96 | ] | ||
97 | }, | ||
98 | }) | ||
99 | }; | ||