Webpack seems to have typed style-loader in.

this is my webpack configuration

const path = require("path")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const pkg = require("../package.json")
const webpack = require("webpack")
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

module.exports = {
  context: path.resolve(__dirname, "../"),
  mode: "development",
  target: "web",
  entry: {
    app: "./src/main.js"
  },
  output: {
    filename: "js/[name].bundle.js",
    path: path.resolve("./dist"),
    publicPath: "/"
  },
  resolve: {
    // modules: [
    //   path.resolve("./src"),
    //   "node_modules"
    // ],
    alias: {
      "@": path.resolve("./src")
    },
    extensions: [".js", ".vue", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve("./src")],
        loader: "babel-loader"
      },
      {
        test: /\.js$/,
        include: [path.resolve("./src")],
        enforce: "pre",
        loader: "eslint-loader",
        options: {
          formatter: require("eslint-friendly-formatter"),
          emitError: true
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: "url-loader",
        options: {
          limit: 8192,
          name: "images/[name].[hash:5].[ext]"
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10240,
          name: "fonts/[name].[hash:5].[ext]"
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve("static"),
    publicPath: "/",
    compress: true,
    hot: true,
    open: true,
    overlay: true,
    port: 9999,
    clientLogLevel: "warning",
    proxy: {}
  },
  plugins: [
    new CleanWebpackPlugin([path.resolve("./dist")], {
      root: path.resolve("./")
    }),
    new HtmlWebpackPlugin({
      title: pkg.name,
      filename: "index.html",
      template: path.resolve("index.html")
    }),
    new webpack.HotModuleReplacementPlugin(),
    new BundleAnalyzerPlugin()
  ],
  devtool: "cheap-eval-source-map"
}

Why did you type in style-loader and css-loader when using analyzer to analyze after packaging? Causes the file to be very large

"webpack": "^4.12.2",
"webpack-cli": "^3.0.8"

package.json

{
  "name": "bundletask",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --display --config ./build/webpack.config.js",
    "dev": "webpack-dev-server --inline --progress --color --config ./build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.5",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "chalk": "^2.4.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^5.0.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^2.1.5",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.2",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}
Mar.22,2021

did you put style-loader and cssloader in dependence in pkg.json? These two things should be in the dev-dependece.
in addition, the mode configured in your webpack is' development', so you should type it in.

< hr >

see the pkg.json you posted, big brother, you only have a devdependence, and the mode configured in the webpack is' development', package, of course.

I suggest you learn the basics of webpack. Or you wouldn't understand.


your package.json post


you don't use plug-ins to type css into a separate file, so the style is dynamically created by js to insert style tags into the page. Where do you think this code comes from? It's styleMutual loader! So this way is to type in the style-loader to complete the function of dynamically creating style tags into the style. You can choose to use the mini-css-extract-plugin plug-in to extract the css into a separate file to avoid this problem, which is configured in product mode. In addition, there is little point in analyzing bundle in development mode.

Menu