第 3 章:webpack 开发环境的基本配置
3.1 创建配置文件
1. webpack.config.js
const { resolve } = require('path'); // node 内置核心模块,用来处理路径问题。
module.exports = {
entry: './src/js/index.js', // 入口文件
output: { // 输出配置
filename: './built.js', // 输出文件名
path: resolve(__dirname, 'build/js') // 输出文件路径配置 },
mode: 'development' //开发环境
};
1. 创建文件 webpack.config.js
2. 配置
3. 运行指令: webpack
4. 结论: 此时功能与上节一致
3.2 打包样式资源
- 创建项目代码于src目录下:
index.js
// 引入样式资源
import './index.css';
import './index.less';
index.css
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
index.less
#title {
color: white;
}
-
下载安装 loader 包
// 如果是初始状态,需执行第1、2指令 npm init // 生成package.json npm install webpack webpack-cli -D // 下载并安安装webpack webpack-cli ;生成node_moundle文件夹和package-lock.json // 建议在外层目录下载包,避免重复下载包 npm i css-loader style-loader less-loader less -D
-
webpack的配置文件,webpack.config.js
作用: 指示 webpack 干哪些活(当你运行 webpack 指令时,会加载里面的配置) 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。(项目代码是ES6) 详解loader配置
const { resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径; 输出到当前文件目录下的build目录
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 详细loader配置
// 不同文件(如less、css)必须配置不同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和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
-
执行webpack指令运行,在build目录下生成build.js
项目目录> webpack
-
引入打包后的文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack3</title>
</head>
<body>
<h1 id="title">打包样式资源</h1>
<script src="./built.js"></script>
</body>
</html>
“创建style标签,将js中的样式资源插入进行,添加到head中生效”
3.3 打包 HTML 资源
- 创建文件:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
</body>
</html>
index.js
function add(x, y) {
return x + y;
}
console.log(add(2, 3));
-
下载安装 plugin 包
npm install --save-dev html-webpack-plugin
-
修改配置文件webpack.config.js
/*
loader: 1. 下载 2. 使用(配置loader)
plugins: 1. 下载 2. 引入 3. 使用
*/
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: [
// loader的配置
]
},
plugins: [
// plugins的配置
// html-webpack-plugin 【注意】
// 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
// new HtmlWebpackPlugin() // 生成的html文件没有<body>,比如 <h1 id="title">hello html</h1>
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)
template: './src/index.html'
})
],
mode: 'development'
};
- webpack执行打包
在build目录下生成index.html,并自动引入打包输出的所有资源(JS/CSS)
build\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script defer src="built.js"></script></head>
<body>
<h1 id="title">hello html</h1>
</body>
</html>
3.4 打包图片资源
- 创建文件:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./angular.jpg" alt="angular">
</body>
</html>
index.js
import './index.less';
index.less
#box1{
width: 100px;
height: 100px;
background-image: url('./vue.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width: 200px;
height: 200px;
background-image: url('./react.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
background-image: url('./angular.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
-
下载安装 plugin 包
npm install --save-dev html-loader url-loader file-loader
-
修改配置文件webpack.config.js
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: /\.less$/,
// 要使用多个loader处理用use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 问题:默认处理不了html中img图片 【注意】
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
// 解析时会出问题:[object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
- webpack执行打包
在build目录下生成index.html,并自动引入打包输出的所有资源(JS/CSS)
build\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script defer src="built.js"></script></head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="4be04d639ff5a6a8cb8b.jpg" alt="angular">
</body>
</html>
3.5 打包其他资源
-
创建文件
其他资源: 不需要处理的资源,如字体图标 -
修改配置文件webpack.config.js
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'
};
3.6 devserver
开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)
特点:只会在内存中编译打包,不会有任何输出
启动devServer指令为:npx webpack-dev-server
- 下载
npm i webpack-dev-server -D - 修改配置文件webpack.config.js
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指令为:npx webpack-dev-server
devServer: {
// 项目构建后路径
static: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
};
-
运行指令: npx webpack-dev-server
运行成功提示:Compiled successfully. 本地调试地址:浏览器地址:localhost:3000 因为-D是本地安装,所以用npx;之前的webpack -g是全局安装 以前webpack4的时候配置devServer中用的是contentBase:“www”; webpack5需要替换成 static:“www”
3.7 开发环境配置
总结以上内容
-
创建文件
-
index.html、index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开发环境配置</title>
</head>
<body>
<h1>开发环境配置</h1>
<span class="iconfont icon-icon-test"></span>
<span class="iconfont icon-icon-test2"></span>
<span class="iconfont icon-icon-test3"></span>
<span class="iconfont icon-icon-test1"></span>
<div id="box"></div>
<img src="./imgs/vue.jpg" alt="vue">
<img src="./imgs/react.png" alt="react">
</body>
</html>
// 引入
import '../css/iconfont.css';
import '../css/index.less';
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
- 配置webpack.config.js
/*
开发环境配置:能让代码运行
运行项目指令:
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包,没有输出
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
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']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs'
}
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
static: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
};
- 执行webpack