webpack 介绍： webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
wepack可以打包压缩所有文件格式
webpack可以在入口对文件直接进行打包压缩 为静态资源文件
核心：
entry 入口
output 出口
loader
loader 用于对模块的源代码进行转换
plugin 插件
如果想要使用webpack打包压缩特定资源文件 我们需要配置一个文件 名字webpack.config.js文件
所有核心都是在这个文件中完成的
使用流程：
1 安装
npm install webpack webpack-cli --save-dev
2 创建webpack.config.js文件 在文件中粘贴代码
const path = require('path');
module.exports = {
entry: '相对路径.js', // 打包文件的入口
output: { // 输出打包后文件的路径
filename: '打包后的文件名.js',
path: path.resolve(__dirname, '打包后的文件路径'),
},
};
3 配置package.json文件
"build": "webpack"
4 执行打包 需要运行npm run build
打包js文件
1 打包js单文件
entry: '相对路径.js',
2 打包js多文件
entry: {
自定义属性名1: '路径1',
自定义属性名2: '路径2'
....
}
filename: '[name].js', // name指的是自定义属性名
打包css/sass/less文件
1 需要安装loader
css:
css-loader style-loader
sass:
sass-loader css-loader style-loader
less:
less less-loader css-loader style-loader
2 在module里边配置匹配规则：
rules: [
{
test: /\.css$/i,
use: ["style-loader","css-loader"] // use数组中的配置项 需要按照从右到左的顺序执行
},
{
test: /\.less$/i,
use: ["style-loader","css-loader","less-loader"] // use数组中的配置项 需要按照从右到左的顺序执行
},
{
test: /\.scss|.sass$/i,
use: ["style-loader","css-loader","sass-loader"] // use数组中的配置项 需要按照从右到左的顺序执行
}
]
3 打包图片文件(png/jpg/jpeg/webp/gif)
1 webpack 5.x
我们可以直接对图片资源文件进行打包处理 而不需要安装相关loader
因为webpack 5.x已经在内部自动集成了相关的loader 例如url-loader file-loader
2 webpack 4.x
1 安装file-loader
npm i file-loader --save-dev
2 需要配置
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
]
4 打包html页面
1 安装
npm i --save-dev html-webpack-plugin
2 配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: '标题',
filename: '生成后的文件名',
template: '被打包文件模板',
inject: "插入的位置", // true false head body
// chunks: ['a','b'], // 允许引入的模块
excludeChunks: ['b'] // 不允许引入的模块
})
...
]
5 对js中打包的css文件 进行单独的打包引入
1 安装
npm install --save-dev mini-css-extract-plugin
2 配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
将正则匹配中style-loader全部替换为MiniCssExtractPlugin.loader
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
}
3 在plugin中编写new MiniCssExtractPlugin
new MiniCssExtractPlugin{
filename: "要生成的文件名字" // '[name].css' name值得是entry入口中js自定义的属性名
}
6 打包视频音频
1 安装
npm install copy-webpack-plugin --save-dev
2 配置
new CopyPlugin({
patterns: [
{ from: "你要复制的文件夹路径", to: "要生成的文件夹路径" }
]
}),
