对于手动设置资产管理，我还很陌生。直到我突破这个障碍，而且我一直在网上寻找答案已有很长时间了，一切都很好。

这是我的package.json

    "predev": "webpack --mode development","dev": "npm run dev -- --watch","production": "NODE_ENV=production webpack --mode production","test": "echo \"Error: no test specified\" && exit 1"
  },"devDependencies": {
    "@babel/core": "^7.7.0","@babel/preset-env": "^7.7.1","@babel/preset-react": "^7.7.0","babel-loader": "^8.0.6","css-loader": "^3.2.0","cssnano": "^4.1.10","file-loader": "^4.2.0","mini-css-extract-plugin": "^0.8.0","node-sass": "^4.13.0","postcss-import": "^12.0.1","postcss-loader": "^3.0.0","postcss-preset-env": "^6.7.0","purgecss-webpack-plugin": "^1.6.0","react-hot-loader": "^4.12.15","sass-loader": "^8.0.0","style-loader": "^1.0.0","sugarss": "^2.0.0","webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"
  },"dependencies": {
    "react": "^16.11.0","react-dom": "^16.11.0"
  }

这是webpack配置

const webpack = require("webpack");
const glob = require("glob");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Purgecssplugin = require("purgecss-webpack-plugin");

let inProduction = process.env.NODE_ENV == "production";

module.exports = {
  entry: {
    app: [
      path.resolve(__dirname,"./public/javascript/src/index.js"),path.resolve(__dirname,"./public/style/main.scss")
    ]
  },output: {
    path: path.resolve(__dirname,"./public/dist"),publicPath: "/",filename: "[name].js"
  },optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",test: /\.css$/,chunks: "all",enforce: true
        }
      }
    }
  },module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: /node_modules/,use: ["babel-loader"]
      },{
        test: /\.(sa|sc|c)ss$/,use: [
          {
            loader: MiniCssExtractPlugin.loader,options: {
              hmr: !inProduction
            }
          },"css-loader","postcss-loader","sass-loader"
        ]
      },{
        test: /\.(png|svg|jpg|gif|ttf|woff|woff2)$/,use: [
          {
            loader: "file-loader",options: {
              name: "./public/images/[name][hash].[ext]"
            }
          }
        ]
      }
    ]
  },resolve: {
    extensions: ["*",".js",".jsx"]
  },plugins: [
    new webpack.HotModuleReplacementPlugin(),new MiniCssExtractPlugin({
      filename: !inProduction ? "[name].css" : "[name].[hash].css",chunkFilename: !inProduction ? "[id].css" : "[id].[hash].css",ignoreOrder: false // Enable to remove warnings about conflicting order
    }),new Purgecssplugin({
      paths: glob.sync(path.resolve(__dirname,"./public/style/*"),{
        nodir: true
      }),styleExtensions: [".css"]
    })
  ],watch: true
};

postcss配置

module.exports = ({ file,options,env }) => ({
  parser: file.extname === ".css" ? "sugarss" : false,plugins: {
    "postcss-import": {},"postcss-preset-env": {},cssnano: {}
  }
});

我的css文件中确实没有任何内容可以测试，只是简单的主体背景色，而当我为开发人员运行npm时，却没有出现内容错误的提示。目前，这只是一个空项目，只是为了使其扎根。接下来，我将添加react并开始编写UI。这是一个Codeigniter 4项目，不是我自己选择的，因此在JS应用程序上并不完整。