webpack 大套餐和配置,babel版本和压缩的小问题

最好是html文件在最外层，js和css写在src里面，这样就免得配置输入输出

①之前一直因为babel-loader版本不对一直报错，Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null，看了各种博客，还是报错，干脆就直接到babel-loader的github上按官方的来，反而解决了。

②安装html压缩工具时候要安file-loader和url-loader

webpack 4.x | babel-loader 8.x | babel 7.x 

npm init -y //(这一步弄出package.json)

npm install -D babel-loader @babel/core @babel/preset-env webpack

npm i html-webpack-plugin html-loader --save-dev

npm i file-loader url-loader -D   //(这是解析图片，转为base64位)

npm i mini-css-extract-plugin css-loader --save-dev

npm i webpack-dev-server --save-dev //(本地服务器，自动刷新)

//webpack.config.js的配置文件

const HtmlWebPackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'] //这里配置了babel就不需要。babelrc文件配置了
              }
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
                options: { minimize: true }
              }
            ]
          },
          {
              test: /\.(png|jpg|gif)$/i,
              use:[
                  {loader: "url-loader"}
              ]
          },
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"]
          }
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: "./moments.html",
          filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
          })
      ]

}

//package.json的scripts配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open", //自动刷新
    "dev": "webpack --mode development ", 
    "build": "webpack --mode production " 
  },

 

//index.js头部需要引入
import style from './style.css'
//不然不会打包css