重学webpack5——开发环境配置

目录

一、创建配置文件

二、打包css、less资源 

三、打包HTML资源 

四. 打包图片资源

（1）CSS中图片资源 background-image: url()

（2） HTML中的图片资源 < img src="" >

五、打包其他资源

五、 devServer

开发环境配置总结

---

一、创建配置文件

跟前面一样，先创建

npm init
npm i webpack webpack-cli -D

二、打包css、less资源 

创建webpack配置文件webpack.config.js
作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs

/*
    webpack.config.js webpack的配置文件

*/
// node 内置核心模块，用来处理路径问题
const { resolve } = require('path');

module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: './built.js',
        // 输出路径
        // __dirname nodjs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'bulid')
    },
    // loader 的配置
    module: {
        rules: [
            // 详细loader配置
            // 不同文件必须配置不同loader处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上 以此执行
                    // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]    
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: 'development',
    // mode: 'production'

}

loader引入了需要下载

npm i css-loader style-loader less-loader -D

使用webpack指令进行打包

webpack

三、打包HTML资源 

用插件处理HTML资源

loader: 1. 下载 2. 使用（配置loader）
plugins： 1. 下载 2. 引入 3.使用

下载

npm i html-webpack-plugin -D

引入

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

使用   

/*
    loader: 1. 下载 2. 使用（配置loader）
    plugins： 1. 下载 2. 引入 3.使用

*/
// node 内置核心模块，用来处理路径问题
const { resolve