新建dist目录

    image.png

    1. const path = require("path");
    2. module.exports = {
    3.   //入口文件,入口文件的路径
    4.   entry: "./src/index.js",
    5.   //输出
    6.   output: {
    7.     //输出文件名称
    8.     filename: "built.js",
    9.     //输出路径，这里需要绝对路径
    10.     //这里相当于 D:\下载\webpacjks\webpack与\dist拼接
    11.     path: path.resolve(__dirname, "dist"),
    12.   },
    13.   //开发模式,这里还可以时production生产模式
    14.   mode: "development",
    15.   module: {
    16.     //对某种格式的文件进行转换的处理
    17.     rules: [
    18.       {
    19.         //匹配规则，得用正则表达式，这里是匹配后缀名
    20.         test: /\.css$/,
    21.         use: [
    22.           //先将css文本的格式用style标签插进html中，在进行css渲染
    23.           //将js的样式插入style标签中
    24.           //数组中解析的顺序是从下到上的顺序，逆序执行
    25.           "style-loader",
    26.           //将css转化为js
    27.           "css-loader",
    28.         ],
    29.       },
    30.       {
    31.         test: /\.less$/,
    32.         use: [
    33.           //先将css文本的格式用style标签插进html中，在进行css渲染
    34.           //将js的样式插入style标签中
    35.           //数组中解析的顺序是从下到上的顺序，逆序执行
    36.           "style-loader",
    37.           //将css转化为js
    38.           "css-loader",
    39.           "less-loader"
    40.         ],
    41.       },
    42.     ],
    43.   }
    44. };

    打包命令

    webpack