javascript - Utilisation du chargeur postcss dans webpack2.

Question

1. Configurez postcss.config.js selon le site officiel

    module.exports = {
      plugins: [
        require('autoprefixer')
      ]
    }

2. Puis dans webpack.config.js

  {
    test:/\.css$/,
    use: [
      { 
        loader: 'style-loader'
      },
      { 
        loader: 'css-loader',
        options: { importLoaders: 1 }
      },
      { 
        loader: 'postcss-loader'
      }
    ]
  }

3. Exécutez ensuite webpack et une erreur apparaîtra

ERROR in ./~/css-loader?{"importLoaders":1}!./~/.2.0.6@postcss-loader/lib!./app/
common.css
Module build failed: Error: Cannot find module 'caniuse-db/data.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\jj\Desktop\webpack\node_modules\.1.7.7@brows
erslist\index.js:5:46)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\jj\Desktop\webpack\node_modules\.6.7.7@autop
refixer\lib\autoprefixer.js:5:18)
    at Object.<anonymous> (C:\Users\jj\Desktop\webpack\node_modules\.6.7.7@autop
refixer\lib\autoprefixer.js:92:4)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\jj\Desktop\webpack\postcss.config.js:3:5)
    at Module._compile (module.js:570:32)
    at requireFromString (C:\Users\jj\Desktop\webpack\node_modules\.1.2.1@requir
e-from-string\index.js:27:4)
    at C:\Users\jj\Desktop\webpack\node_modules\.2.1.3@cosmiconfig\lib\loadJs.js
:11:15
 @ ./app/common.css 4:14-136
 @ ./app/index.js

4. Effacez postcss.config.js et modifiez webpack.config.js. Cela échoue à nouveau et l'erreur est la même qu'à l'étape précédente.

  { 
    loader: 'postcss-loader',
    options: {
      plugins: (loader) => [
        require('autoprefixer')()
      ]
    }
  }

5. Suivez les méthodes trouvées en ligne

new webpack.LoaderOptionsPlugin({
    options: {
        postcss: function() {
            return [require('autoprefixer')];
        }
    }
}),

根据网上做法
npm i webpack-loader-options-merge --save-dev
然后在webpack.config.js加入
var loaderOptionsMerge = require('webpack-loader-options-merge');
loaderOptionsMerge(webpackConfigObject);
webpack(webpackConfigObject);
我不明白new webpack.LoaderOptionsPlugin这里为什么这样写
而且也会报错
loaderOptionsMerge(webpackConfigObject);
                   ^
ReferenceError: webpackConfigObject is not defined

6. Si vous supprimez la partie postcss, il n'y aura aucun problème et cela fonctionnera normalement. Tous les problèmes devraient être là

.

Seven. J'ai vraiment l'impression que je n'arrive pas à comprendre. Le package.json.webpack ci-joint est non seulement installé globalement, mais aussi --save-dev.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bulid": "webpack",
    "start": "webpack-dev-server --env development",
    "lint": "eslint app/ webpack.*.js --cache"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "css-loader": "^0.28.4",
    "eslint": "^4.0.0",
    "eslint-loader": "^1.8.0",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "postcss": "^6.0.2",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-loader-options-merge": "0.0.3"
  }
}

Answer 1

Je ne connais pas la raison précise, donc je vais juste poster ma configuration...

post.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'ios >= 8'})
  ]
}

webpack2

{
   test: /\.css$/,
   loaders: ["style-loader", "css-loader", "postcss-loader"]
}

Si cela ne fonctionne pas, je vous donnerai l'adresse de l'entrepôt... https://github.com/mqyqingfen...

Answer 2

Est-ce que ça pourrait couler comme ça...

Answer 3

Il semble qu'il n'y ait pas de problème, vous pouvez essayer de changer le préfixe automatique vers la version précédente, ou supprimer node_modules et réinstaller npm