webpack 配置

• webpack.config.js 文件

// nodejs 核心模块配置路径
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 1.核心配置：配置文件打包入口文件路径
    entry: './src/index.js',
    // 2.核心配置：文件打包完成后出口配置
    output: {
        // 文件名称
        filename: '[name].js',
        // 文件出口路径
        path: resolve(__dirname, 'build')
    },
    // 3.核心配置：配置资源编译规则 loader
    module: {
        rules: [
            // css样式资源 
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            // sass样式资源 
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 图片资源 样式文件中引入的图片资源
            // 需要下载 url-loader file-loader
            {
                test: /\.(png|jpg)$/,
                // 下载 url-loader file-loader
                // 如果需要使用多个loader就是use:[],如果是单个loader则就是如下写法就可以了
                loader: 'url-loader',
                options: {
                    // 图片大小小于10kb，就会base64处理
                    // 优点:减少请求数量，减轻服务器压力
                    // 缺点：图片体积会更大，请求文件速度变慢
                    limit: 10 * 1024,
                    // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    // 解析时会出问题，需要关闭url-loader的ex6模块化，使用commonjs解析
                    esModule: false,
                    // 图片重命名
                    // [hash:10]区哈希值前10位作为图片的名字
                    // [ext]使用文件原来的扩展名
                    name: '[hash:10].[ext]'
                },
                // css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入)页面会出错，所以设置下面属性即可；
                type: 'javascript/auto',
            },
            // 配合图片资源
            {
                test: /\.html$/,
                // 处理html文件的img图片(负责引入img，从而能被url-loader进行处理)
                loader: 'html-loader'
            },
            // 打包其他资源 如icon图标 这里有点问题
            {
                // 排除css/html/scss/js等资源，其他的资源都使用file-loader
                exclude: /\.(css|html|js|scss)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }

        ]
    },
    // 4.核心配置：插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 5.核心配置：环境配置 development/produdtion
    mode: 'development',
    // 其他配置
    resolve: {
        // 配置别名
        alias: {
            '@': resolve(__dirname, 'src'),
        },
        // 指定 extensions 之后，使用require 和 import 的时候就不需要加文件扩展名了，查找的时候会依次匹配，但同一个目录有不同类型的同名文件时，也只会匹配第一个。
        extensions: ['.vue', '.js', '.json', '.scss', '.css'],
    },
    // 开发服务器devServer:用来自动打包（自动编译，自动打开浏览器，自动刷新浏览器等）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：npx webpack-dev-server 需要下载 npm install  webpack-dev-server -D
    devServer: {
        // 项目构建后路径，告诉服务器从哪里提供内容
        // 旧版本使用这个配置 contentBase: resolve(__dirname, 'build'),新版本使用static属性配置路径
        // webpack4配置devServer中用的是contentBase:“”;
        // webpack5需要替换成 static:“”
        static:  resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 启动服务端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    }
}