重学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 } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: './built.js',
path: resolve(__dirname, 'bulid')
},
module: {
rules: [
{
},
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
// html-webpack-pligin
// 功能：默认会创建一个空的html， 自动引入打包输出的所有资源（js/css）
// 需求： 需要有结构的html文件
new HtmlWebpackPlugin({
// 复制'./src/index.html'文件, 并自动引入打包输出所有的资源（js/css）
template: './src/index.html'
}
)
],
// 模式
mode: 'development'
// mode: 'production'
};
四. 打包图片资源
（1）CSS中图片资源 background-image: url()
下载 url-loader
npm i url-loader file-loader -D使用
可能会出现的问题
出现打包后图片多出一倍，是webpack的asset模块又进行打包了一次，可以添加type来关闭，第二处就是打开HTML文件后图片引用失败且后缀为【object%20Module】是因为webpack5默认开启esModule，手动设为false关闭就行
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
esModule: false, // webpack5默认开启esModule 手动关闭
// 图片大小小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
},
type: 'javascript/auto' // 阻止webpack5中asset
}
（2） HTML中的图片资源 < img src="" >
下载 html-loader
npm i html-loader -D{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader'
}打包后的图片名称太长，可以给图片进行重命名 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]'
}五、打包其他资源
例如字体图标之类的不需要处理的资源
- 排除资源才选择其他资源
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(除了html/js/css资源以外的资源)
{
// 排除css/js/html资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};五、 devServer
devServer：开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出（不会在项目中新建一个文件夹）
下载
npm i webpack-dev-server -D配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/indes.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: []
},
plugins: [],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'), // 项目构建后的路径
compress: true, // 是否使用gzip压缩
port: 3000, // 设置端口号
open: true // 是否自动打开浏览器
}
}
如何启动：
npx webpack serve(webpack-cli: 4.x);npx webpack-dev-server(webpack-cli 3.x);
如果报错
devServer: {
// contentBase: resolve(__dirname, "build"),
static:resolve(__dirname, "build"),
}开发环境配置总结
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
}
}
打包不同类型的文件
- .css文件: style-loader, css-loader;
- .less文件: style-loader, css-loader,less-node;(还需安装less)
- .scss/sass文件: style-loader, css-loader, sass-loader;(还需安装node-sass)
- .html文件: html-webpack-plugin;
- 图片文件(.pngl.jpgl.jepgl.gif等): url-loader, html-loader;其他文件: file-loader。
配置loader的不同写法
module.exports = {
entry: './src/indes.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
// 写法一：
// use: ['style-loader', 'css-loader']
// 写法二：
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
exclude: /\.(css|js|html|png|gif|jpg)$/,
// 写法三：
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [],
mode: 'development'
}