以下内容提到的下载安装均在最大的文件夹下安装
以下内容提到的下载安装均在最大的文件夹下安装，能可同时方便每一部分的使用。
一、打包样式资源
1. 创建文件
less文件：
#title {
color: #fff;
}
css文件：
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
index.js文件：
// 引入样式资源
import './index.css';
import './index.less';
2.关于 webpack.config.js，配置webpack
- webpack.config.js是 webpack 的配置文件
- 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
- 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname 是nodejs的变量，代表当前文件的目录绝对路径（此时是03.打包样式资源）
path: resolve(__dirname, 'build')//'03.打包样式资源' 下的 build文件夹
},
// 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和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
3.下载安装loader包
npm i css-loader style-loader less-loader less -D
4.运行指令:webpack
webpack
打包成功。
5. 在build文件夹创建 index.html文件，并引入打包后的文件
<h1 id="title">hello less</h1>
<script type="text/javascript" src="./built.js"></script>
二、打包HTML资源
1. 创建文件
index.js文件：
function add(x, y) {
return x + y;
}
console.log(add(2, 3));
index.html文件：
<h1 id="title">hello html</h1>
2. 下载安装plugin包
npm install --save-dev html-webpack-plugin
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）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
],
mode: 'development'
};
- loader：1. 下载 2. 使用（配置loader）
- plugins：1. 下载 2. 引入 3. 使用
4. 运行指令：webpack
webpack
三、打包图片资源
1. 创建文件
index.html文件：
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./angular.jpg" alt="angular">
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%;
}
index.js文件：
import './index.less';
2. 下载安装loader包
npm install --save-dev html-loader url-loader file-loader
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'),
publicPath:'./'
},
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处理（base64会将图片转换成一种base64编码方式）
// base64 优点: 减少请求数量（减轻服务器压力）
// base64 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
//下面这个问题用webpack版本5不会出现，应该是被解决了
//问题：因为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'
};
在这里我遇到的一个问题，如果我不加 publicPath:’./’ ，进行webpack打包时会报错，显示报错，有一个没打包成功，即在HTML中引入的图片造成的问题。网上百度了一下，应该是版本问题，在 output 加上下面那句话就OK了。
publicPath:'./'
4. 运行指令：webpack
四、打包其他资源（例如图标）
例如 Iconfont-阿里巴巴矢量图标库 Iconfont-阿里巴巴矢量图标库
1. 将需要的图标加入购物车，点击右上角购物车，再点击下载代码
2. 解压下载好的文件，打开html文件，可以查看是怎么使用的。这里我们使用 Font class
3. 引入解压后的文件中的 iconfont.css ，根据下图所示，将相关文件也引入，创建文件，最后项目文件目录如下图2所示
index.html文件：
<span class="iconfont icon-add-circle"></span>
<span class="iconfont icon-ashbin"></span>
<span class="iconfont icon-chart-bar"></span>
index.js文件：
// 引入 iconfont 样式文件
import './iconfont.css';
4.设置配置文件
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'
};
5. 运行指令：webpack
webpack
五、devserver
- 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
- 特点：只会在内存中编译打包，不会有任何输出
- 启动devServer指令为：npx webpack serve
1. 创建文件（用上一节的文件）
其中index.html文件改为：
<span class="iconfont icon-add-circle"></span>
<span class="iconfont icon-ashbin"></span>
<span class="iconfont icon-chart-bar"></span>
<h1>Hello webpack</h1>
index.js文件改为：
// 引入 iconfont 样式文件
import './iconfont.css';
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
console.log(add(2, 2));
2. 下载安装 webpack-dev-server
npm install --save-dev webpack-dev-server
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: [
{
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 serve
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
};
和上一节不同的是下图所示部分：
4. 启动devServer
启动devServer指令为
npx webpack serve
可以看到浏览器自动打开：
之后再进行内容修改时，会自动编译，自动刷新浏览器。
注意：
视频里的启动devServer指令为：npx webpack-dev-server
而我是webpack版本5，有所不同，启动devServer指令为：npx webpack serve
这要感谢弹幕告诉了我问题出在哪，应该怎么做，嘿嘿。
六、开发环境配置（整合上述内容）
- 开发环境配置：能让代码运行
- 运行项目指令：
- webpack 会将打包结果输出出去
- npx webpack serve 只会在内存中编译打包，没有输出
1. 创建文件（均是上述文件）
2. 修改配置文件
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'),
publicPath:'./'
},
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模块化(//这个问题用webpack版本5不会出现，应该是被解决了)
//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: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
};
3. 运行指令：npx webpack serve
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
