操作步骤

1、 npm i webpack -g （global全局）
npm i webpack-cli -g

2、 npm init
产生package.json

3、npm install webpack -S
npm install webpack -D

4、dependencies依赖项 存储的是-S
devdependencies开发者依赖性 存储的是-D

6、dist文件夹=》存储webpack打包之后的文件

html文件夹放html

新建一个main.js作为主文件

7、初级打包 webpack main.js --output dist/bundle.js

8、配置webpack之后，写入entry和output

9、通过webpack进行打包

10、通过webpack-dev-server热更新，实时完成打包，将js打包虚拟内存里面

11、 "scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev":"webpack-dev-server"
},

webpack.config.js配置

const path = require("path"); //加载path包
//node内容
module.exports = {
  // entry:入口文件，我们要打包成什么文件
  // output：输出，我们要输出的内容
  // plugins：插件，因为webpack默认只能打包js，如果要打包html，vue，就需要插件
  // resolve：文件别名的配置 js/out/a/b/c.js =》c.js
  // moudule:配置规则，webpack打包 打包配置
  entry: path.join(__dirname, "./main.js"), //dirname文件运行路径
  //html前台,同级目录直接访问,但是后台 同级文件用./

  output: {
    path: path.join(__dirname, "./dist"),
    filename: "boundle.js",
  },
};

const path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "boundle.js",
    publicPath: "dist/", //所有url前都会加上dist/
  },

  module: {
    rules: [{

        test: /\.(less|css)$/,
        /[图片上传失败...(image-c04094-1597320942781)]

s-loader只负责将css文件进行加载，不进行解析所以单独安装不会生效
        //style负责将样式添加到DOM中
        use: [{
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ], //打包时会从右向左进行编译，若载入顺序错误则会报错 (1:1) Unknown word
      },
      // url-loader 配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: "url-loader",
          options: {
            //小于limit时会以base64格式（将图片转换成字符串的格式）渲染到页面中，
            // 大于limit的图片需要下载file-loader 否则会报错
            limit: 13000,
            name: "img/[name].[hash:8].[ext]", //由于打包时webpack为了区别每一张图片会给每张图片不同的32位的hash值，在真实开发中我们可能需要知道图片
            // 的名字所以所以需要配置 img:要打包到的图片路径，name:获取图片名字，hash:8 依然使用hash值，但只保留8位，ext:文件扩展名
          },
        }, ],
      },
      //babel-roader 配置
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, //在对es6进行转化时exclude内的文件不会被转换
        use: {
          loader: "babel-loader",
          options: {
            presets: ["es2015"], //webpack在运行时会去找相关配置文件
          },
        },
      },
    ],
  },
};