webpack5项目之基本配置详解

说到Webpack的配置，其实很多新手一开始都会觉得有点懵——入口、出口、模式、插件……一堆东西堆在一起。但别急，咱们一步步拆开来看，其实核心就那么几块。下面就直接进入正题，从最基础的出入口配置开始。

一.配置项目出入口

先看一个最基础的 webpack.config.js 配置，这里定义了入口文件从哪里开始，打包后的文件往哪里放。

const path = require('path');
module.exports = {
    entry: {
        //设置入口文件为src/main.js 将来会被打包到dist目录下
        main: './src/main.js',
        //other: './src/other.js',//多入口文件,打包后会在dist目录下生成相应js
    },
    output: {
        //打包后文件名
        filename: '[name]-[contenthash:6].js',
        //指定打包文件输出目录
        path: path.resolve(__dirname, 'dist'),
        //在每次构建前清理 /dist 文件夹
        clean: true,
    },
};

注意这里的 filename 用到了 [contenthash:6]，这样每次文件内容变化时，打包后的文件名哈希值也会跟着变，可以有效利用浏览器缓存。而 clean: true 则是一个非常实用的配置——每次构建前自动清空 dist 目录，避免旧文件残留。

二.添加模式

Webpack 提供了 mode 选项，用来区分开发环境和生产环境。如果不设置，默认是 production 模式，会启用各种优化（比如代码压缩）。但开发阶段我们通常需要更快的构建速度和更友好的错误提示，所以一般会设置为 development。

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        main: './src/main.js',
        //other: './src/other.js',
    },
    output: {
        filename: '[name]-[contenthash:6].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
};

这里有个细节：mode 的默认值就是 production，所以如果你什么也不写，Webpack 也会默认给你开启生产模式优化。但开发阶段最好显式设成 development，否则调试时会很痛苦。

三.添加devtool

开发过程中最头疼的就是调试压缩后的代码，完全看不懂。这时候就需要 devtool 登场了——它负责将编译后的代码映射回原始源代码，让你在浏览器控制台里看到的是你写的源码，而不是一堆压缩后的乱码。

const path = require('path');
module.exports = {
    mode: 'development',
    //将编译后的代码映射回原始源代码
    devtool: 'inline-source-map',
    entry: {
        main: './src/main.js',
        //other: './src/other.js',
    },
    output: {
        filename: '[name]-[contenthash:6].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
};

inline-source-map 是开发环境推荐的一种source map方式，它把映射信息直接内联到打包后的文件中，虽然会稍微增加文件体积，但胜在调试方便。生产环境一般会用更轻量的 source-map 或 hidden-source-map，这里先不展开。

四.安装本地环境和内存html插件

如果只是打包JS文件，那还不够。我们通常需要一个HTML文件来承载打包后的脚本。这时候 html-webpack-plugin 就派上用场了——它能自动生成一个HTML文件，并自动引入打包后的JS文件。

npm install -D webpack webpack-cli html-webpack-plugin

然后在配置文件中引入插件，并指定模板文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: './src/main.js',
    output: {
        filename: '[name]-[contenthash:6].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //打包的html模板文件
            title: 'webpack-demo',
            filename: "index.html", //打包后的html名称
        }),
    ],
};

注意这里 template 指向的是你自己写的HTML模板，插件会基于这个模板生成最终的HTML，并自动插入