Postpack与Webpack

Question

我正在尝试使用postcss获取webpack文件但没有成功。

我在src / css文件夹中以.pcss扩展名命名了我的postcss文件

我希望得到在dist / css文件夹中生成的.css文件

这是我到目前为止的webpack配置。

var path = require('path');
var rootPath = path.join(__dirname, './');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
      'main':'./src/js/index.js'
    },
    output: {
        path: path.join(rootPath, 'dist'),
        filename: '[name].js'
    },
    module: {
       loaders: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               loader: 'babel'
           }
       ],
       rules: [
             {
               test: /\.pcss$/,
               exclude: /node_modules/,
               use: [
                 {
                     loader: 'postcss-loader'
                 }
               ]
             },
              {
                  test: /\.css$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: 'style-loader',
                      },
                      {
                          loader: 'css-loader',
                          options: {
                              importLoaders: 1,
                          }
                      }
                  ]
              }
          ]
   },
    watch: true
};

我的postcss.config文件

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer'),
        require('postcss-simple-vars')
    ]
}

我可以知道我做错了什么吗？

Answer 1

使用extractTextPlugin解决了这个问题。代码如下。

var path = require('path');
var rootPath = path.join(__dirname, './');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractPCSS = new ExtractTextPlugin('../css/[name].css');

module.exports = {
    entry: {
      'main':'./src/js/index.js'
    },
    output: {
        path: path.join(rootPath, 'dist','js'),
        filename: '[name].js'
    },
    module: {
       loaders: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               loader: 'babel'
           }
       ],
       rules: [
             {
               test: /\.pcss$/,
               exclude: /node_modules/,
               use: extractPCSS.extract([ 'css-loader', 'postcss-loader' ])
             }
          ]
   },
   plugins: [
     extractPCSS
   ],
    watch: true
};