【webpack】开发环境的基本配置-打包样式、图片、html等资源-热加载配置

最终完整的代码见 https://github.com/yk2012/webpack_demo

1. 创建配置文件

npm init
npm i webpack webpack-cli -D

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

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

module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: './built.js',
        // 输出路径
        // __dirname nodjs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'bulid')
    },
    // loader 的配置
    module: {
        rules: [
            // 详细loader配置
        ]    
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: 'development',
    // mode: 'production'

}

2. 打包样式资源

2.1 css-loader

2.1.1 loader配置

编辑webpack.config.js中的module模块 详细loader配置

    module: {
        rules: [
            // 详细loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上 以此执行
                    // 创建style标签,将js中的样式资源插入进去,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]    
    },

2.1.2 下包 style-loader

npm i css-loader style-loader -D

在这里插入图片描述

2.1.3 打包

使用webpack指令进行打包

webpack

在这里插入图片描述

2.2 less-loader

1. 设置loader

{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        // 将less文件编译成css文件
        'less-loader'
    ]
}

2. 下包(两个包都要下) less-loader、less

npm i less-loader -D

在这里插入图片描述

npm i less -D

在这里插入图片描述

3. 打包

在这里插入图片描述
注意: 之前下的 easy less 记得禁用一下!!!!

3. 打包HTML 资源

loader: 1. 下载 2. 使用(配置loader)
plugins: 1. 下载 2. 引入 3.使用

3.1 下载

npm i html-webpack-plugin@next -D

3.2 引入

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

3.3 使用

plugins: [
    // 详细plugins的配置
    // html-webpack-pligin
    // 功能:默认会创建一个空的html, 自动引入打包输出的所有资源(js/css)
    // 需求: 需要有结构的html文件
    new HtmlWebpackPlugin({
        // 复制'./src/index.html'文件, 并自动引入打包输出所有的资源(js/css)
        template: './src/index.html'
    }
    )
],

3.4 打包

在这里插入图片描述

4. 打包图片资源

4.1 CSS中图片资源 background-image: url()

4.1.1 下载 url-loader

npm i url-loader file-loader -D
在这里插入图片描述

4.1.2 使用

{
    //处理图片资源
    test: /\.(.jpg|png|gif)$/,
    // 使用一个loader
    // 下载 url-loader file-loader
    loader: 'url-loader',
    options: {
        // 图片大小小于8kb,就会被base64处理
        // 优点:减少请求数量(减轻服务器压力)
        // 缺点:图片体积会更大(文件请求速度更慢)
        limit: 8 * 1024
    }
}

4.1.3 打包

在这里插入图片描述
以上方法处理的是css中引入的图片,处理不了html中的图片

4.2 HTML中的图片资源 < img src="" >

4.2.1 下载 html-loader

npm i html-loader -D
在这里插入图片描述

4.2.2 使用

{
    test: /\.html$/,
    // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
    loader: 'html-loader'
}

4.2.3打包

在这里插入图片描述
打包后的图片名称太长,可以给图片进行重命名 name: '[hash:10].[ext]'

loader: 'url-loader',
options: {
    // 图片大小小于8kb,就会被base64处理
    // 优点:减少请求数量(减轻服务器压力)
    // 缺点:图片体积会更大(文件请求速度更慢)
    limit: 8 * 1024,
    // 问题:因为url-loader默认使用es6模块解析,而html-loader引入图片是commonjs
    // 解析时会出现问题:[objcet Moudle]
    // 解决:关闭url-loader的es6模块化,使用commonjs解析
    // esModule: false,(新版本已没有这个问题,可以不写)
    // 给图片进行重命名
    // [hash:10] 取图片的hash的前10位
    // [ext] 取文件原来拓展名
    name: '[hash:10].[ext]'
}

5. 打包其他资源

例如字体图标之类的不需要处理的资源

  • 排除资源才选择其他资源
// 打包其他资源(除了html/js/css资源以外的资源)
{
    // 排除html/js/css资源
    exclude: /\.(css|js|html)$/,
    loader: 'file-loader',
    options: {
        name: '[hash:10].[ext]'
    }
}

在这里插入图片描述

  • 构建之后浏览器显示出字体图标
    在这里插入图片描述

6. devserver实现热加载

  1. 开发服务器devServer 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
  2. 特点:只会在内存中编译打包,不会有任何输出
  3. 启动devServer 指令为:npx webpack serve 要先下包:npm i webpack-dev-server -D

6.1 下载

npm i webpack-dev-server -D
在这里插入图片描述

6.2 设置

devServer: {
	// 项目构建后的路
    contentBase: resolve(__dirname, 'bulid'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
}

6.3 使用

因为没有全局安装,前面加npx

npx webpack serve

在这里插入图片描述
修改代码的同时自动编译显示出来

7. 开发环境配置

最终一个合成完整的webpack配置

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

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            //loader配置
            {
                // 处理less资源
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 处理css资源
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            //处理图片资源
            {
                // 处理css中的图片资源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    // 关闭es6模块化
                    esModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                //处理html中的图片资源
                test: /\.html$/,
                loader: 'html-loader',
            },
            // 处理其他资源
            {
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }

            }
            
        ]
    },
    // 处理html资源
    plugins: [
        // 插件的配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    // 开发环境配置
    devServer: {
        contentBase: resolve(__dirname, 'bulid'),
        compress: true,
        port: 3000,
        open: true
    }
}

最终完整的代码见 https://github.com/yk2012/webpack_demo
欢迎star~~~

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页