webpack的基础配置

项目结构

依赖 (package.json)

{
  "name": "webpackStart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpackBaseConf/webpack.prod.js",
    "dev": "webpack serve --config webpackBaseConf/webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "autoprefixer": "^10.3.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "ts-loader": "^9.2.5",
    "typescript": "^4.4.2",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  }
}

常用文件夹路径（paths.js）

/**
 * @description 常用文件夹路径
 */

const path = require('path')

const srcPath = path.resolve(__dirname, '..', 'src')
const distPath = path.resolve(__dirname, '..', 'dist')

module.exports = {
    srcPath,
    distPath
}

webpack公共配置（webpack.common.js）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath } = require('./paths')

module.exports = {
    entry: path.join(srcPath, 'index'),
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: srcPath,
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                include: srcPath,
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首页'
        })
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    }
}

webpack 开发环境配置

const webpackCommonConf = require('./webpack.common.js')
const { merge } = require('webpack-merge')
const { distPath } = require('./paths')

module.exports = merge(webpackCommonConf, {
    mode: 'development',
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    devtool: 'inline-source-map',
    devServer: {
        port: 8080,
        static: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
})

webpack生产环境配置

const webpackCommonConf = require('./webpack.common.js')
const { merge } = require('webpack-merge')
const { distPath } = require('./paths')

module.exports = merge(webpackCommonConf, {
    mode: 'production',
    devtool: 'source-map',
    output: {
        filename: 'bundle.js',
        path: distPath,
        clean: true
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
})

其他配置文件：.babelrc 和 postcss.config.js

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

// postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')]
}

以上为个人学习配置