学习记录——webpack基本使用（2）：Loader，处理css、es6转es5语法、图片，服务器环境devServer

本文详细介绍了webpack的Loader应用，包括如何处理CSS、ES6转ES5语法、图片处理，并演示了如何配置devServer搭建本地服务器环境。通过Loader如css-loader和file-loader，成功实现了CSS和图片的打包，同时通过使用babel-loader将ES6语法转换为ES5。最后，通过webpack-dev-server实现实时刷新的开发服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack出现的目的：前端不止有单页面还有多个页面

多页面开发的痛点：
跳转到一个新的页面加载的时间很长
开发困难，不容易维护
模块化不好处理
通过前端工程化(webpack)就能解决多页面开发痛点的问题

Loader

加载器：js文件 png文件等打包成一个js文件，不同的文件（css/png等）需要不同的loader来加载。
相关配置：

Module.expores = {
	//key:value
	Module:{ //模块
		Rules:[ //规则
			{
				Test:’/\.js$’,//正则
				Loader:’xxx-loader’//需要用到的loader
			}，
			{
				Test:’/\.js$’,//正则
				Loader:’xxx-loader’//需要用到的loader
			}
		]
	}
}

ES6语法转换ES5语法

在src文件夹新建page.js文件：

	export default {
	    sayName(name) {
	        console.log('我叫' + name);
	    },
	    sayAge(age) {
	        console.log('我今年' + age + '岁了');
	    }
	}

回到index.js文件引入：

	import page from './page.js' //es6语法 ie浏览器不会识别 报错
	page.sayName('张三');
	page.sayAge(20);

命令行工具执行 npx webpack dist下生成一个html文件打开查看结果
在这里插入图片描述
当用webpack打包后不会自动转换成es5语法
比如：在index.js里写 Const fn = () => {console.log(‘我是箭头函数’)}；fn()
打包后查看bundle.js: 依然还是const fn = 箭头函数这种形式

所以我们要将js中es6的语法转换成 es5的语法

下载插件 npm i babel-loader @babel/preset-env @babel/core -D

webpack.config.js文件：处理es6语法
在这里插入图片描述
命令行工具执行 npx webpack
查看 bundle.js 改成了es5语法 var fn = 函数

处理css文件

在src文件夹下新建一个 style文件夹在里面新建一个index.css 随便写个样式
在这里插入图片描述

回到index.js里引入：

import './style/index.css'; //引入css文件

直接这样写执行打包命令会报错
ERROR in ./src/index.js
Module not found: Error: Can’t resolve ‘./style/index.css’ in ‘C:\Users\zr\Desktop\vue-self\2020.4.30\src’
@ ./src/index.js 8:0-17
在这里插入图片描述
提示我们缺少一个loader
所以我们要先去下载相关loader：npm i style-loader css-loader -D

 处理css
 style-loader:将css插入到head标签中
 css-loader:将css打包成js文件
 先打包再插入，顺序不能错，先css-loader再style-loader
 用use，特性：loader加载机制 从后向前，从下到上

然后去webpack.config.js里写相关配置：在module里面写

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'] 
 }

在这里插入图片描述
然后执行npx webpack命令查看dist文件夹下生成的index.html背景颜色改变,css插入成功

处理图片

src文件夹里创建一个assets文件夹用来放图片，将一个图片放进去
index.html ：

<body>
    <div id="app">/div>
</body>

index.js里：动态创建img标签

let img = new Image();
img.src = './assets/1.jpg';
document.getElementById('app').appendChild(img);

执行npx webpack 虽然打包成功，但是打开浏览器查看，图片并没有正确显示
在这里插入图片描述
右键查看一下：

因为打包完后的html文件是在dist文件夹里，而图片正常来说也要出现在dist里，但是图上路径依然是src/assets文件夹里
所以要通过引入图片并下载一个loader来处理图片
index.js：

下载loader：npm i file-loader -D

webpack.config.js进行相关配置：依然是写到module里

{
text:/\.（png|jpg|gif|svg）$/,
loader:‘file-loader’//文件加载的loader
},

在这里插入图片描述
然后命令行工具执行 npx webpack 打包成功，dist文件夹里会生成那个图片，打开浏览器也能成功看到

devServer

搭建一个服务器环境（node）

下载插件 npm i webpack-dev-server -D

webpack.config.js：
在这里插入图片描述
在命令行工具中执行 npx webpack-dev-server 启动服务器

之前的地址：
现在直接浏览器访问localhost:8080就能访问这个页面了

webpack.config.js文件

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //开发环境 打包之后文件不被压缩 development
    //生产环境 打包之后文件不被压缩 production
    mode: 'development',
    //入口文件
    entry: './src/index.js',
    //出口文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 8080
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] // @babel/core
                    }
                }]
            },
            //处理css
            //style-loader:将css插入到head标签中
            //css-loader:将css打包成js文件
            //先打包再插入，顺序不能错，先css-loader再style-loader
            //用use，特性：loader加载机制 从后向前，从下到上
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //use可以加载多个loader
            },
            //处理图片
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader' //文件加载的loader
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', //打包前的html文件名字
            filename: 'index.html' //打包之后希望叫什么名字
        })
    ],

}