Skip to content

Commit 31e039d

Browse files
first commit
0 parents  commit 31e039d

7 files changed

+376
-0
lines changed

Contributors.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
GitHub contributors:
2+
--------------------------------
3+
- Frédéric BENOIST

Readme.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# PrestaShop 1.7 Webpack 4 for classic rocket theme
2+
3+
webpack 4 configuration files for PrestaShop classic rocket theme
4+
5+
==For PrestaShop Development training only.==
6+
7+
### Prerequisites
8+
9+
- You need a shop with **PrestaShop 1.7.0.0** or higher.
10+
- You need **NodeJS**.
11+
- You need access to the **shell** of your server.
12+
13+
## Installing
14+
15+
1. Install files
16+
17+
```sh
18+
$ cd prestashop_root_directory/themes/my_theme/_dev
19+
$ git clone https://github.com/frederic-benoist/webpack4-classic-rocket.git
20+
$ mv -force webpack4-classic-rocket/* ./
21+
$ rm -r -force webpack4-classic-rocket
22+
```
23+
24+
2. install dependencies
25+
26+
```sh
27+
npm install
28+
```
29+
30+
## Running
31+
32+
1. Watch files and recompile whenever they change.
33+
```sh
34+
npm run watch
35+
```
36+
2. Build assets in development mode (source map, etc.)
37+
```sh
38+
npm run dev
39+
```
40+
3. Build assets in production mode (minify, etc.)
41+
```sh
42+
npm run prod
43+
```
44+
45+
## Authors
46+
47+
* **Frédéric BENOIST** - *Initial work* - [Formateur PrestaShop](https://www.fbenoist.com)
48+
49+
See also the list of [contributors](https://github.com/frederic-benoist/webpack3-classic-rocket/Contributors) who participated in this project.
50+
51+
## Licensing
52+
53+
This source file is subject to the Academic Free License (AFL 3.0)
54+
that is available through the world-wide-web at this URL:
55+
http://opensource.org/licenses/afl-3.0.php
56+
If you did not receive a copy of the license and are unable to
57+
obtain it through the world-wide-web, please send an email
58+
to [email protected] so we can send you a copy immediately.
59+
60+
## DISCLAIMER
61+
62+
> Do not edit or add to this file if you wish to upgrade this module to newer versions in the future. If you wish to customize PrestaShop for your needs please refer to http://www.prestashop.com for more information.
63+
64+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "webpack4-classic-rocket",
3+
"version": "1.0.0",
4+
"description": "Webpack 4 for PrestaShop Classic Rocket",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "webpack --progress --hide-modules --mode development",
8+
"prod": "webpack --progress --hide-modules --mode production",
9+
"watch": "webpack --progress --watch --mode development",
10+
"build": "echo \"Error: use dev or prod\" && exit 0 ",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"author": "Frédéric BENOIST",
14+
"license": "AFL-3.0",
15+
"devDependencies": {
16+
"@babel/core": "^7.0.0-rc.1",
17+
"@babel/preset-env": "^7.0.0-rc.1",
18+
"babel-loader": "^8.0.2",
19+
"bourbon": "^4.3.4",
20+
"css-loader": "^1.0.0",
21+
"file-loader": "^1.1.11",
22+
"mini-css-extract-plugin": "^0.7.0",
23+
"node-sass": "^4.9.3",
24+
"optimize-css-assets-webpack-plugin": "^5.0.0",
25+
"path": "^0.12.7",
26+
"postcss-cssnext": "^3.1.0",
27+
"postcss-loader": "^3.0.0",
28+
"sass-loader": "^7.1.0",
29+
"style-loader": "^0.22.1",
30+
"uglifyjs-webpack-plugin": "^2.1.3",
31+
"uglify-save-license": "^0.4.1",
32+
"webpack": "^4.17.0",
33+
"webpack-cli": "^3.1.0",
34+
"webpack-fix-style-only-entries": "^0.3.0"
35+
},
36+
"dependencies": {
37+
"bootstrap": "^4.2.1",
38+
"bootstrap-touchspin": "^4.2.5",
39+
"flexibility": "^1.0.5",
40+
"lazysizes": "4.1.5",
41+
"material-design-icons": "^2.1.3",
42+
"popper.js": "^1.14.3"
43+
}
44+
}

postcss.config.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* 2007-2019 Frédéric BENOIST
3+
*
4+
* NOTICE OF LICENSE
5+
*
6+
* This source file is subject to the Academic Free License (AFL 3.0)
7+
* that is bundled with this package in the file LICENSE.txt.
8+
* It is also available through the world-wide-web at this URL:
9+
* http://opensource.org/licenses/afl-3.0.php
10+
* If you did not receive a copy of the license and are unable to
11+
* obtain it through the world-wide-web, please send an email
12+
* to [email protected] so we can send you a copy immediately.
13+
*
14+
* DISCLAIMER
15+
*
16+
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
17+
* versions in the future. If you wish to customize PrestaShop for your
18+
* needs please refer to http://www.prestashop.com for more information.
19+
*
20+
* @author Frédéric BENOIST
21+
* @copyright 2013-2019 Frédéric BENOIST <https://www.fbenoist.com/>
22+
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
23+
*/
24+
25+
module.exports = {
26+
plugins: [
27+
require("postcss-cssnext")
28+
]
29+
};

webpack.config.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* 2007-2019 Frédéric BENOIST
3+
*
4+
* NOTICE OF LICENSE
5+
*
6+
* This source file is subject to the Academic Free License (AFL 3.0)
7+
* that is bundled with this package in the file LICENSE.txt.
8+
* It is also available through the world-wide-web at this URL:
9+
* http://opensource.org/licenses/afl-3.0.php
10+
* If you did not receive a copy of the license and are unable to
11+
* obtain it through the world-wide-web, please send an email
12+
* to [email protected] so we can send you a copy immediately.
13+
*
14+
* DISCLAIMER
15+
*
16+
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
17+
* versions in the future. If you wish to customize PrestaShop for your
18+
* needs please refer to http://www.prestashop.com for more information.
19+
*
20+
* @author Frédéric BENOIST
21+
* @copyright 2013-2019 Frédéric BENOIST <https://www.fbenoist.com/>
22+
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
23+
*/
24+
25+
const webpack = require('webpack');
26+
27+
let css_config = require('./webpack/css.config.js');
28+
let js_config = require('./webpack/js.config.js');
29+
30+
module.exports =
31+
[
32+
css_config,
33+
js_config
34+
];

webpack/css.config.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* 2007-2019 Frédéric BENOIST
3+
*
4+
* NOTICE OF LICENSE
5+
*
6+
* This source file is subject to the Academic Free License (AFL 3.0)
7+
* that is bundled with this package in the file LICENSE.txt.
8+
* It is also available through the world-wide-web at this URL:
9+
* http://opensource.org/licenses/afl-3.0.php
10+
* If you did not receive a copy of the license and are unable to
11+
* obtain it through the world-wide-web, please send an email
12+
* to [email protected] so we can send you a copy immediately.
13+
*
14+
* DISCLAIMER
15+
*
16+
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
17+
* versions in the future. If you wish to customize PrestaShop for your
18+
* needs please refer to http://www.prestashop.com for more information.
19+
*
20+
* @author Frédéric BENOIST
21+
* @copyright 2013-2019 Frédéric BENOIST <https://www.fbenoist.com/>
22+
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
23+
*/
24+
25+
const webpack = require('webpack');
26+
const path = require('path');
27+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
28+
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
29+
// Fix main.js (https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151)
30+
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
31+
32+
const devMode = process.argv.indexOf('development') !== -1; // In development mode ?
33+
34+
let css_config = {
35+
entry: './css/theme.scss',
36+
output: {
37+
path: path.resolve(__dirname, '../../assets/css'),
38+
},
39+
devtool: devMode ? 'source-map' : '',
40+
module: {
41+
rules: [
42+
{
43+
test: /\.scss$/,
44+
use: [
45+
{
46+
loader: MiniCssExtractPlugin.loader
47+
},
48+
{
49+
loader: 'css-loader'
50+
},
51+
{
52+
loader: 'postcss-loader',
53+
options: { ident: 'postcss' }
54+
},
55+
{
56+
loader: 'sass-loader'
57+
}
58+
// Note that the loaders are ordered from bottom to top or right to left.
59+
// Loaders act like functions, that’s why it’s from right to left.
60+
// For example, css-loader(postcss-loader(sass-loader(resource)))
61+
]
62+
},
63+
{
64+
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
65+
use: [
66+
{
67+
loader: 'file-loader',
68+
options: {
69+
name: '../css/[hash].[ext]'
70+
}
71+
}
72+
]
73+
},
74+
]
75+
},
76+
optimization: {},
77+
plugins: [
78+
new FixStyleOnlyEntriesPlugin(),
79+
new MiniCssExtractPlugin({
80+
filename: 'theme.css',
81+
}),
82+
new webpack.optimize.LimitChunkCountPlugin({
83+
maxChunks: 1,
84+
}),
85+
],
86+
};
87+
88+
if (!devMode) {
89+
css_config.optimization.minimizer = [
90+
new OptimizeCSSAssetsPlugin()
91+
];
92+
}
93+
94+
module.exports = css_config;

webpack/js.config.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/**
2+
* 2007-2019 Frédéric BENOIST
3+
*
4+
* NOTICE OF LICENSE
5+
*
6+
* This source file is subject to the Academic Free License (AFL 3.0)
7+
* that is bundled with this package in the file LICENSE.txt.
8+
* It is also available through the world-wide-web at this URL:
9+
* http://opensource.org/licenses/afl-3.0.php
10+
* If you did not receive a copy of the license and are unable to
11+
* obtain it through the world-wide-web, please send an email
12+
* to [email protected] so we can send you a copy immediately.
13+
*
14+
* DISCLAIMER
15+
*
16+
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
17+
* versions in the future. If you wish to customize PrestaShop for your
18+
* needs please refer to http://www.prestashop.com for more information.
19+
*
20+
* @author Frédéric BENOIST
21+
* @copyright 2013-2019 Frédéric BENOIST <https://www.fbenoist.com/>
22+
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
23+
*/
24+
25+
const webpack = require('webpack');
26+
const dev = process.argv.indexOf('--env=dev') !== -1; // In production mode ?
27+
const path = require('path');
28+
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
29+
const keepLicense = require('uglify-save-license');
30+
31+
const devMode = process.argv.indexOf('development') !== -1; // In development mode ?
32+
33+
34+
let plugins = [
35+
new webpack.ProvidePlugin({
36+
Popper: ['popper.js', 'default']
37+
})
38+
];
39+
40+
let js_config = {
41+
entry: {
42+
theme: [
43+
'./js/theme.js'
44+
]
45+
},
46+
output: {
47+
path: path.resolve(__dirname, '../../assets/js'),
48+
filename: 'theme.js'
49+
},
50+
module: {
51+
rules: [
52+
{
53+
use: {
54+
loader: 'babel-loader',
55+
options: {
56+
presets: [
57+
['@babel/preset-env', {modules: false}]
58+
]
59+
}
60+
},
61+
test: /\.js$/
62+
},
63+
],
64+
},
65+
optimization: {
66+
67+
},
68+
externals: {
69+
prestashop: 'prestashop',
70+
$: '$',
71+
jquery: 'jQuery'
72+
},
73+
plugins: plugins,
74+
resolve: {
75+
extensions: ['.js']
76+
}
77+
};
78+
79+
js_config.plugins = js_config.plugins||[];
80+
if (devMode) {
81+
js_config.devtool = 'source-map';
82+
js_config.cache = true;
83+
} else {
84+
js_config.cache = false;
85+
js_config.optimization.minimizer = [
86+
new UglifyJsPlugin({
87+
sourceMap: false,
88+
uglifyOptions: {
89+
compress: {
90+
sequences: true,
91+
dead_code: true,
92+
conditionals: true,
93+
booleans: true,
94+
unused: true,
95+
if_return: true,
96+
join_vars: true,
97+
drop_console: true
98+
},
99+
output: {
100+
comments: keepLicense
101+
}
102+
}
103+
}),
104+
];
105+
}
106+
107+
108+
module.exports = js_config;

0 commit comments

Comments
 (0)