Jump to content

Webpack Theme classic Prestashop 1.7


Recommended Posts

Bonjour,

 

J'utilise node v7.2, npm v3.10.9 et je souhaiterais utiliser webpack sur le theme classic de prestashop 1.7.

Lorsque je lance "npm run build" cela me sort ce message d'erreur :

Invalid configuration object. Webpack has been initialised using a configuration
 object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?,
entry, externals?, loader?, module?, name?, node?, output?, performance?, plugin
s?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, res
olveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configura
tion.
     Loaders should be updated to allow passing options via loader options in mo
dule.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these
 options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: ...
         }
       })
     ]
 - configuration.output.path: The provided value "../assets/js" is not an absolu
te path!
 - configuration.resolve.extensions[0] should not be empty.

Le package.json est celui par défaut du theme classic et pour le fichier de config du webpack le voici :

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");


var plugins = [];
 
var production = false;
 
if (production) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}
 
plugins.push(
  new ExtractTextPlugin(
    path.join(
      '..', 'css', 'theme.css'
    )
  )
);
 
module.exports = {
  entry: [
    './js/theme.js'
  ],
  output: {
    path: '../assets/js',
    filename: 'theme.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        fallback: "style",
        use: "css?sourceMap!postcss!sass?sourceMap"
      })
    }, {
      test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
      loader: 'file-loader?name=../css/[hash].[ext]'
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader!postcss-loader"
    }]
  },
  postcss: function() {
    return [require('postcss-flexibility')];
  },
  externals: {
    prestashop: 'prestashop'
  },
  devtool: 'source-map',
  plugins: plugins,
  resolve: {
    extensions: ['', '.js', '.scss']
  }
};

C'est le fichier de config de base avec seulement : "

ExtractTextPlugin.extract({
        fallback: "style",
        use: "css?sourceMap!postcss!sass?sourceMap"
      })"

De changé car ExtractTextPlugin.extract ne prend plus qu'un argument.

 

Si quelqu'un à une solution pour débuger cela, ou une technique de A à Z pour utiliser un webpack sur le theme classic je suis trés fortement intéressé.

 

Merci d'avance,

Link to comment
Share on other sites

Bonjour,

 

J'avais fait un sujet à ce propos, mais je peux même plus voir mes ancien contenus et on sais ce que vaut la recherche :rolleyes: .

 

Donc pour faire simple :

récupérer le fichier package.json dans le git

 

Lancer npm install avec windows powerShell (ou autre) Dans le dossier _dev

Lancer npm run build

 

Et voila pleurer parce qu'une version sur deux ca bug :-) mais sur la 7.1.2 c'est bon il me semble.

 

Bonne journée

Link to comment
Share on other sites

Bonjour,

 

Merci beaucoup pour votre réponse.

Pour limiter le nombre "d’interférences" j'ai tout refais de A à Z.

 

J'ai re-téléchargé :

- Prestashop 1.7.2.

- Node 8.1.2

 

Puis comme vous l'avez indiqué j'ai placé le fichier package.json du git dans le _dev du theme classic.

 

Seulement aprés avoir lancé npm install (Qui se déroule sans soucis mis à part quelques warnings), npm run  watch me sort cette erreur :

                throw new Error("Breaking change: extract now only takes a singl
e argument. Either an options " +
                ^

Error: Breaking change: extract now only takes a single argument. Either an opti
ons object *or* the loader(s).
Example: if your old code looked like this:
    ExtractTextPlugin.extract('style-loader', 'css-loader')

You would change it to:
    ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })

The available options are:
    use: string | object | loader[]
    fallback: string | object | loader[]
    publicPath: string

    at Function.ExtractTextPlugin.extract (C:\wamp\www\Cycloide\themes\cycloide_
theme\_dev\node_modules\extract-text-webpack-plugin\index.js:187:9)
    at Object.<anonymous> (C:\wamp\www\Cycloide\themes\cycloide_theme\_dev\webpa
ck.config.js:66:33)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at requireConfig (C:\wamp\www\Cycloide\themes\cycloide_theme\_dev\node_modul
es\webpack\bin\convert-argv.js:96:18)

J'ai donc changé la ligne ciblé dans le fichier de config du webpack et maintenant j'ai cette erreur :

Invalid configuration object. Webpack has been initialised using a configuration
 object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?,
entry, externals?, loader?, module?, name?, node?, output?, performance?, plugin
s?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, res
olveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configura
tion.
     Loaders should be updated to allow passing options via loader options in mo
dule.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these
 options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: ...
         }
       })
     ]
 - configuration.output.path: The provided value "../assets/js" is not an absolu
te path!
 - configuration.resolve.extensions[0] should not be empty.

 Une idée ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...