webpack 基本配置

webpack.config.js

// npm i -D webpack webpack-cli
// npm i html-webpack-plugin
// npm i -D webpack-dev-server
// npm i -D style-loader css-loader
// npm i -D less-loader less style-loader sass-loader
// npm i -D postcss-loader postcss postcss-preset-env
// npm i -D tml-withimg-loader
// npm i -D url-loader file-loader image-webpack-loader  html-loader
// npm i -D mini-css-extract-plugin
// npm i -D optimize-css-assets-webpack-plugin
// npm i -D @babel/preset-env @babel/core

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        filename: 'js/index.js',
        path: path.resolve(__dirname, './dist'),
    },
    // mode: 'development',
    mode: 'production',
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify:{
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[hash].css',
            // chunkFilename: "css/[id].css"
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    devServer: {
        // open: true,
        port: 8000,
        // 不检查域名
        disableHostCheck: true,
        // 开启gzip压缩
        compress: true,
        // 路径设置
        contentBase: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 'postcss-loader',
                    // 处理css兼容性处理
                    {
                        loader: "postcss-loader",
                        options: {
                            ident:'postcss',
                            plugins:()=>[require('postcss-preset-env')()]
                        },
                    }
                ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 限制图片大小
                            limit: 1024 * 100,
                            // 关闭es6模块化
                            esModule: false,
                            // 给图片改名字
                            name: '[hash:10].[ext]',
                            outputPath: 'imgs'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|woff2|svg)$/,
                use: ['url-loader']
            },
            {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
            // 处理 es6 语法
            {
                test: /\.js$/,
                // use: 'babel-loader',
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns:'usage',
                                    corejs:{
                                        version:3
                                    },
                                    targets:{
                                        chrome:'60',
                                        firefox:'60',
                                        ie:'9',
                                        safari:'10',
                                        edge:'17'
                                    }
                                }
                            ]
                        ]
                    }
                },
                exclude: /(node_modules|bower_components|ppaweb\\libs\\webpack)/
            },
        ],
    },
    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 300000, // 整数类型（以字节为单位）
        maxEntrypointSize: 500000, // 整数类型（以字节为单位）
        assetFilter: function (assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    }
};

package.json

{
  "name": "page1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "html-webpack-plugin": "^3.2.0",
    "moment": "^2.29.1",
    "node-xlsx": "^0.17.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^4.3.0",
    "handlebars": "^4.7.7",
    "html-loader": "^2.1.2",
    "html-withimg-loader": "^0.1.16",
    "image-webpack-loader": "^3.6.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "post-loader": "^2.0.0",
    "postcss": "^8.4.8",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.1",
    "regenerator-runtime": "^0.13.9",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1",
    "url-loader": "^2.3.0",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"
    ]
}

 postcss.config.js

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}

 目录结构