webpack基本使用以及css相关处理

webpack.config.js

const path = require("path")

module.exports = {
  entry: "./src/main.js", // 入口文件
  output: {
    filename: "bundle.js", // 打包后的js名字
    path: path.resolve(__dirname, "./dist") // 绝对路径 打包的js放入哪个文件夹
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 对资源进行匹配
        use: [
          // 以下为简写写法
          "style-loader", // 将解析后的css插入文档
          "css-loader", // 解析.css文件
          "postcss-loader", // 依赖 postcss-preset-env插件 默认查找postcss.config.js中导出的内容
          // 以下为完整写法
          // postcss-preset-env插件会将新css特性转为大多数浏览器所识别的css 会自动添加浏览器前缀
          // {
          //   loader: "postcss-loader",
          //   options: {
          //     postcssOptions: {
          //       plugin: [
          //         require("postcss-preset-env")
          //       ]
          //     }
          //   }
          // }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader" // 编译scss文件
        ]
      }
    ]
  }
}
复制代码

package.json

    {
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.4.2",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

复制代码