Question

Webpack 4不适合我。我主要希望它将SCSS编译为CSS 这是配置文件。此外，它不会抛出任何错误只是表明它已被编译。我确定它在撒谎:)。

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
      App: './public/javascript/index.js'
  },
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader"
                // options: {
                //     minimize: {
                //         safe: true
                //     }
                // }
            },
            {
                loader: "postcss-loader",
                options: {
                    autoprefixer: {
                        browsers: ["last 2 versions"]
                    },
                    plugins: () => [
                        autoprefixer
                    ]
                },
            },
            {
                loader: "sass-loader",
                options: {}
            }
        ]
    },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./public/dist/style.css",
      chunkFilename: "./public/dist/[id].css"
    })
  ]
};

这里也是我正在运行的文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "nodemon ./start.js --ignore /public",
    "dev": "concurrently \"npm run watch\" \"npm run assets\" --names \",\" --prefix name",
    "assets": "webpack-dev-server --mode development"
},

所以它不是编译，不抛出任何错误，并告诉代码已编译但目标文件夹中没有文件。

Answer 1

请参阅以下链接。这是我的webpack 4配置文件的一部分。它将SASS提取到CSS。虽然我的问题是我仍然没有找到一种方法来删除webpack 4中的冗余CSS。

How to remove unused CSS using webpack 4?

我的代码中是否有一些错误，因为文件没有编译

1 个答案: