简单入门webpack

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')//编译html模板文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin') //每次构建前清除dist文件

module.exports = {
  //入口文件
    entry:{
        main :path.resolve(__dirname,'./src/index.js'),
    },
  //打包文件输出地址
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'[name].bundle.js',
    },
    //插件
    plugins: [
        //编译html模板文件
        new HtmlWebpackPlugin({
          title: 'webpack Boilerplate',
          template: path.resolve(__dirname, './src/template.html'), // template file
          filename: 'index.html', // output file
        }),
        //每次构建前清除dist文件
        new CleanWebpackPlugin(),
      ],
    module:{
      /*babel-loader-使用 Babel 和 webpack 传输文件。@babel/core-将ES2015+ 转换为向后兼容的 JavaScript。@babel/preset-env-Babel 的智能默认设置。
        @babel/plugin-proposal-class-properties-自定义 Babel 配置的示例（直接在类上使用属性）。
      */
     /* 在项目的根目录中创建一个.babelrc文件。可以使用preset-env和plugin-proposal-class-properties添加更多默认值解决报错问题 */
      rules:[
        {
          test:/\.js$/,
          exclude:/node_modules/,
          use:['babel-loader']
        },
        //加载图片静态资源
        {
          test:/\.(?:ico|gif|png|jpg|jpeg)$/i,
          type:'asset/resource',
        },
        //可以使用asset/inline内联某些数据，例如svgs和字体。
        // Fonts and SVGs
        {
          test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
          type: 'asset/inline',
        },
        // CSS, PostCSS, and Sass
        //编译sass,css，将文件导入index.js并添加四个 loader 。它们从最后编译到第一个，因此列表中最后一个是sass-loader，因为需要编译，然后是PostCSS，然后是CSS，最后是style-loader，它将CSS注入到DOM 中。
        {
          test: /\.(scss|css)$/,
          use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
        },
      ]
    }

}

postcss.config.js

module.exports = {
    plugins: {
      'postcss-preset-env': {
        browsers: 'last 2 versions',
      },
    },
  }

.babelrc

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

目录结构