从 scss 到 css 的简单转换，不包含

Question

webpack 新手，学习曲线有趣。但我的需要只是执行以下操作（我今天正在使用 bash）

node-sass ./src/styles/default.scss > ./dist/assets/default.css

• 我不需要将它包含在 html 中。
• 我不想将 css 包含到 javascript 文件中。

从 scss 到 css 的简单转换。

Answer 1

Nvm，为我做了以下工作：

webpack.config.js

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

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'default.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' }
      }, {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      }, {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
  plugins: [
    new HtmpWebPackPlugin({
      path: __dirname + '/dist/assets',
      filename: 'default.html',
      template: 'src/index.html',
      inject: false,
      hash: false
    }),
    new MiniCssExtractPlugin({
      filename: 'default.css',
      outputPath: 'dist/assets'
    })
  ]
}

package.json

"scripts": {
    "build": "rm -rf ./dist && webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }