原生 js 使用webpack打包

先上目录结构    

Webpack和它的CLI工具可以通过npm进行安装：

npm install webpack webpack-cli --save-dev

然后 配置webpack.config.js   

1.加载器

• babel-loader：用于将ES6+代码转换为ES5代码。
• css-loader和style-loader：用于处理CSS文件。
• file-loader和url-loader：用于处理图片和字体文件。

• npm install babel-loader @babel/core @babel/preset-env --save-dev

2. 插件

• HtmlWebpackPlugin：用于生成HTML文件。
• CleanWebpackPlugin：用于在每次构建之前清理输出目录。
• MiniCssExtractPlugin：用于将CSS提取到独立的文件中。

• npm install html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin --save-dev

3.安装cross-env 使用环境变量

npm install cross-env --save-dev

4.Webpack提供了一个开发服务器webpack-dev-server，可以在本地进行实时预览和热更新。

npm install webpack-dev-server --save-dev

 完整配置：

const path = require("path");

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

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

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

const TerserPlugin = require("terser-webpack-plugin");

const webpack = require("webpack");

module.exports = {
  entry: "./index.js",

  output: {
    filename: "[name].[contenthash].js",

    path: path.resolve(__dirname, "dist"),
  },

  module: {
    rules: [
      {
        test: /.js$/,

        exclude: /node_modules/,

        use: {
          loader: "babel-loader",

          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },

      {
        test: /.css$/,

        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

      {
        test: /.(png|svg|jpg|gif)$/,

        use: ["file-loader"],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),

    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),

    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
  ],

  optimization: {
    splitChunks: {
      chunks: "all",
    },

    minimize: true,

    minimizer: [new TerserPlugin()],
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),

    compress: true,

    port: 9000,

    hot: true,
  },
};

在package.json中添加脚本：

"scripts": {"build:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js",

"build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.js"

}