webpack4配置方法(loader、babel、vue什么鬼的恶心死了)

有时npm uninstall卸载一些东西后，会莫名其妙报错找不到webpack，甚至找不到什么Cannot find module '@webassemblyjs/ast’

上菜：

1、删除整个node_modules
2、npm init -y
3、cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin less-loader less sass-loader node-sass url-loader file-loader babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties @babel/plugin-transform-strict-mode @babel/plugin-transform-modules-commonjs vue vue-loader vue-router vue-template-compiler path mint-ui moment–s -d
4、自己看还要补什么咯
=========================================
5、配置文件
①创建 webpack.config.js

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html"
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=987654"
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: "url-loader"
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

②主目录的package.json → script节点

"dev": "webpack-dev-server --open --port 3000 --hot --mode development",
"build": "webpack --mode production"

③创建 .babelrc ，内容：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

————————————————

平时运行指令:npm run dev
————————————————