目录
3.为了看到效果，在最外层下创建index.html，运行即可
4.webpack目录下创建配置文件webpack.config.js
1.在src下创建css文件夹，并在其中创建style.css
3.在src下创建img文件夹，往里加入测试图片text.png
webpack是一个静态的模块化打包工具，为现代的javaScript应用程序
- 打包bundler : webpack可以帮助我们进行打包
- 静态的static : 我们可以将代码打包成最终的静态资源，部署到静态服务器
- 模块化module : webpack支持各种模块化开发，ES Module . CommonJS . AMD 等
- 现代的modern : 因为现代前端开发面临各种问题，才催生了webpack的出现和发展
我们可以编写左边的各种类型的代码，但是浏览器不能直接识别，所以需要打包工具对代码进行打包，生成可以被浏览器直接识别的静态资源(右边)
webpack是如何打包的呢
- webpack会根据命令或者配置文件找到入口文件
- 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）
- 然后遍历图，打包一个个模块（根据文件的不同使用不用的loader来进行解析）
一、webpack的使用前提
因为webpack的运行时依赖Node环境，所以需要安装Node。下载 Node.js
注：安装好node后，npm就已经存在了
二、项目初始化
1.创建webpack文件夹，进入文件夹后初始化
npm init -y2.安装webpack (-D 安装开发依赖)
npm install webpack webpack-cli -D3.创建文件夹src
4.src下创建js 文件夹
5.js 文件夹创建math.js
//ES6的导出
export function sum(num1,num2){
return num1 + num2
}6. js 文件夹创建format.js
// CommonJs的导出
const priceFormat = function(){
return '$99.88'
}
module.exports = {
priceFormat
}7.src下创建index.js
import { sum } from './js/math';
const { priceFormat } = require('./js/format');
console.log(sum(20, 30));
console.log(priceFormat());
8.以上所说的目录结构如此
三、JavaScript的打包
1.修改package.json
"scripts": {
"build":"webpack"
},2.打包（后续所有的打包，都是这个命令，就不再写了哈～～）
npm run build3.为了看到效果，在最外层下创建index.html，运行即可
// 引用打包后的js文件
<body>
<script src="./dist/main.js"></script>
</body>以上为webpack默认指定的入口和出口，下面手动配置
4.webpack目录下创建配置文件webpack.config.js
简单来说，通过webpack来打包，需要指定一个入口，指定出口
入口：需要打包的文件都要放在入口处，没放进来的不会被打包
出口：经过打包后的文件所放的地方
const path = require('path'); // 需要使用 Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
// 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
path: path.resolve(__dirname, './dist'),
// 打包后的js的文件名
filename: 'boundle.js'
}
};
四、CSS的打包
1.在src下创建css文件夹，并在其中创建style.css
body{
background-color: skyblue;
/* 下面测试postcss用 */
user-select: none;
}2.在index.js中导入
import './css/style.css';
3. 下载所需CSS的loader
loader : 可以用于对模块的源代码进行转换
因为webpack默认只能打包js，如果需要打包其他模块（例如css），需要下载对应loader
css-loader : 负责将.css文件进行解析，但并不会讲解析后的css插入到页面中
style-loader : 完成页面插入css操作
npm install css-loader style-loader -D4.在webpack.config.js文件中进行配置
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
// 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
path: path.resolve(__dirname, './dist'),
// 打包后的js的文件名
filename: 'boundle.js'
},
// 配置模块
module: {
// 规则
rules: [
{
// 用正则表达式来进行匹配，匹配css文件
test: /\.css$/,
// 使用的loader。注：这里执行顺序是从右往左走｜从下往上，先解析，再插入
use: ['style-loader', 'css-loader']
}
]
}
};
五、less｜sass的配置
前提是下载了less｜scss哦，以下已less为栗子，sass下载对应的包即可
npm install less -D1.在src下的css文件夹中创建text.less
@textColor:blue;
body{
color: @textColor;
}小tip : 如果使用vscode，可以安装插件 Easy LESS ，当保存less文件内容时，会自动生成对应的css文件,方便观看，不下载亦可
2.在index.js中导入
import './css/text.less'3. 下载less的loader
npm install less-loader -D4.在webpack.config.js文件中进行配置
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.css$/, // 用正则表达式来进行匹配，匹配css文件
use: ['style-loader', 'css-loader'] // 使用的loader
},
{
test: /\.less$/, // 用正则表达式来进行匹配，匹配less文件
use: ['style-loader', 'css-loader', 'less-loader'] // 使用的loader
}
// -------css和less的配置可以合并，如下-------
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'less-loader'] // 使用的loader
}
]
}
};
六、PostCSS工具配置
PostCSS :
- 是一个通过JavaScript来转换样式的工具
- 可以帮助我们进行一些CSS的转换和适配，如自动添加浏览器前缀，css样式的重置
使用PostCSS :
- 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
- 选择可以添加所需要的PostCSS相关的插件
1.下载postcss-loader
npm install postcss-loader -D2.下载所需要的插件
autoprefixer : 自动添加浏览器前缀
postcss-preset-env : 将现代的css特性转为大多数浏览器可识别的css，自动添加浏览器前缀
所以，直接用下面辣个插件即可
npm install postcss-preset-env -D
3.在webpack.config.js文件中进行配置
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: [
'style-loader',
'css-loader',
// 使用postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')]
}
}
},
'less-loader' // 先把less转换，然后再用这个插件会好点
]
}
]
}
};
4. 已经添加成功
5.优化一下，可以把postcss的配置专门写到一个文件中
在目录下新建postcss.config.js文件
module.exports = {
plugins: [require('postcss-preset-env')]
};
那么 webpack.config.js只要这么写即可
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] // 使用的loader
}
]
}
};
七、图片资源的打包（webpack5之前版本）
注：这里说的是webpack5之前的版本所使用的 , 否则可能报错
webpack5中file-loader和url-loader都不怎么使用了
要处理jpg、png等格式的图片，也需要有对应的loader
file-loader : 作用是帮助我们处理import\require()方式引入的文件资源，并放到我们输出的文件夹中，不管大小都输出文件
url-loader : 和file-loader工作方式是相似的，不过可以将较小的图片转成base64的URI
两个使用其中一个即可
1.安装filer-loader，url-loader
npm install file-loader url-loader -D2.在webpack.config.js中进行配置
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
{
test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
use: [
{
loader: 'file-loader',
options: {
// 高版本的file-loader不这样配置的话，img的src为[object Module]
esModule: false
}
},
/// -----------------使用其中一个即可
{
loader: 'url-loader',
options: {
// 高版本的file-loader不这样配置的话，img的src为[object Module]
esModule: false
}
}
]
}
]
}
};
3.在src下创建img文件夹，往里加入测试图片text.png
4.在css文件夹中创建image.css
.div-dom{
width: 100%;
height: 500px;
background: url('../img/text.png') ;
}5.在js文件夹中创建element.js
// 导入css样式
import '../css/image.css';
import imgUrl from '../img/text.png';
// 创建一个div元素 , 设置背景图片
const divDom = document.createElement('div');
// 赋值一个class
divDom.className = 'div-dom';
// 加入到body中
document.body.appendChild(divDom);
// 创建一个img元素 , 设置src
const imgDom = document.createElement('img');
// 注意，不能这样赋值，这样相当于赋值了个字符串，到时候页面会从相对路径去找图片，是找不到的
// imgDom.src = '../img/text.png';
// 赋值src，相当于导入一个模块
imgDom.src = imgUrl;
// 加入到body中
document.body.appendChild(imgDom);
6.在index.js中导入
import './js/element';
7.打包一下即可
file-loader打包结果如下
如果使用url-loader打包的，可能没有生成图片，小图片会在boundle.js中以base64形式存在，望周知
8.优化，打包后的文件位置和文件名不太优雅
- 要保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等
- 可以使用PlaceHolders有很多，可以查阅下文档 file-loader ，前几个都比较常用
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
{
test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
use: [
{
loader: 'file-loader',
options: {
// 高版本的file-loader不这样配置的话，img的src为[object Module]
esModule: false,
// 打包后会有个img文件夹
outputPath:'img',
// 保留名字，加上6位hash值，保留扩展名
name:"[name]__[hash:6].[ext]"
}
}
//----------使用一个即可
{
loader: 'url-loader',
options: {
// 高版本的file-loader不这样配置的话，img的src为[object Module]
esModule: false,
// 设置当小于100kb的图片打包成base64，大于的打包成图片输出到img文件夹中
limit: 100 * 1024,
// 打包后会有个img文件夹
outputPath: 'img',
// 保留名字，加上6位hash值，保留扩展名
name: '[name]__[hash:6].[ext]'
}
}
]
}
]
}
};
八、图片资源的打包（webpack5之后版本）
webpack5之前 : 加载这些资源需要使用一些loader，比如url-loader、file-loader
webpack5之后 : 直接使用资源模块类型( asset module type )，来替代上面的loader
- asset / resource : 发送一个单独的文件并导出URL，之前是使用 file-loader
- asset / inline : 导出一个资源的data URI ，之前是使用 url-loader
- asset / source : 导出资源的源代码 ，之前是使用 raw-loader
- asset : 在导出一个data URI 和 发送一个单独文件之间自动选择，之前是通过使用 url-loader，并且配置资源体积限制( limit )来实现
你会发现更简单啦，不用下载loader
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
{
test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
// 自动选择
type: 'asset',
parser: {
// 数据url的条件配置
dataUrlCondition: {
// 超过100kb的图片打包，小于的弄成bast64
maxSize: 100 * 1024
}
},
// 生成
generator: {
outputPath: 'img',
filename: '[name]__[hash:8][ext]',
// 以上这两个属性可以合在一起
filename: 'img/[name]__[hash:8][ext]'
}
}
]
}
};
九、打包字体文件
首先得现有字体文件，我是在阿里矢量图标库中下载的 iconfont-阿里巴巴矢量图标库
把选中的图标添加到自己的项目，下载下来即可
1.在src下创建font文件夹
2. 在element.js文件中，加入新的代码
// 导入字体的css
import '../font/iconfont.css';
const iDom = document.createElement('i');
// 使用下载的字体图标，注意使用方法
iDom.className = 'iconfont icon-icon_tianjia';
document.body.appendChild(iDom);
3.使用的类名为
4.在webpack.config.js中进行配置
const path = require('path'); // Node内置模块
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
filename: 'boundle.js' // 打包后的js的文件名
},
// 配置模块
module: {
// 规则
rules: [
{
test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
{
test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
// 自动选择
type: 'asset',
parser: {
// 数据url的条件配置
dataUrlCondition: {
// 超过100kb的图片打包，小于的弄成bast64
maxSize: 100 * 1024
}
},
// 生成
generator: {
filename: 'img/[name]__[hash:8][ext]'
}
},
{
test: /\.(eot|ttf|woff2?)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的字体文件
type: 'asset/resource',
// 生成
generator: {
filename: 'font/[name]__[hash:8][ext]'
}
}
]
}
};