javascript – Verwendung des PostCSS-Loaders in Webpack2.

Question

1. Konfigurieren Sie postcss.config.js gemäß der offiziellen Website

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

2. Dann in webpack.config.js

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

3. Führen Sie dann Webpack aus und es wird ein Fehler angezeigt

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. Löschen Sie postcss.config.js und ändern Sie webpack.config.js. Es schlägt erneut fehl und der Fehler ist der gleiche wie im vorherigen Schritt.

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

5. Befolgen Sie die online gefundenen Methoden

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. Wenn Sie den Postcss-Teil entfernen, wird es kein Problem geben und es sollte normal laufen.

Sieben. Ich habe wirklich das Gefühl, dass ich es nicht herausfinden kann. Das angehängte package.json.webpack ist nicht nur global installiert, sondern auch --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

我也不知道具体的原因所在，就贴上我的配置吧……

post.config.js

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

webpack2

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

实在不行，我把仓库地址给你…… https://github.com/mqyqingfen...

Answer 2

难道就这样沉了...

Answer 3

看着没问题，可以试试把autoprefixer换成以前的版本，还有就是把node_modules删了重新npm install