Webpack5开发环境基本配置

建立src文件夹

<-- 注意webpack.config.js文件与src文件夹同级 -->

webpack.config.js文件配置如下：

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

module.exports={
    //入口文件：index.js的相对路径
    entry: './src/js/index.js',
    //输出
    output: {
        //输出为build文件夹下的js目录，文件名为build.js
        filename: "js/build.js",
        path: resolve(__dirname,'build')
    },
    module: {
        rules: [
            //loader配置
            {
                //1. 打包less资源
                test: /.less$/,   //正则
                //顺序为自下而上，不能变更
                use:['style-loader','css-loader','less-loader']
            },
            {
                //2. 打包css资源
                test: /.css$/,
                use:['style-loader','css-loader']
            },
            {
                //3. 打包css、less中的图片资源
                test: /.(jpg|png|gif)$/,
                loader: "url-loader",
                options: {
                    limit:8*1024,
                    //图片命名
                    name:'[hash:10].[ext]',
                    //关闭es6模块化
                    esModule:false,
                    //输出为build文件夹下的imgs目录下
                    outputPath:'imgs'
                }
            },
            {
                //4. 处理html中的图片资源
                test: /.html$/,
                loader: "html-loader"
            },
            {
                //5. 处理其他资源（字体等）
                exclude: /.(html|js|css|less|jpg|png|gif)/,
                loader:'file-loader',
                options: {
                    name:'[hash:10].[ext]',
                    //输出为build文件夹下的media目录下
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        //6. 打包html资源
        //自动在打包后的html中引入build.js
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    //7. 自动编译
    devServer: {
        contentBase:resolve(__dirname,'build'),
        compress:true,
        //端口号
        port:3000,
        //自动打开网页
        open:true
    },
    //开发模式
    mode:'development'
}

配置后可完成功能：

1. 打包less资源
2. 打包css资源
3. 打包图片资源
4. 处理其他资源（字体等）
5. 打包html资源
6. 自动编译（但不会保存输出结果）

输出结果build文件夹整洁有序：