webpack5 基础知识篇
一级目录
二级目录
三级目录
一、webpack是什么？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
四个核心概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
在这里对webpack的四个核心概念就不做多余的描述，详情课参考官网：https://www.webpackjs.com/concepts/
二、webpack 安装
npm init -y
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
三、配置文件基本配置
3.1 配置文件基本内容
新建一个mywebapck文件夹
- js 里面装index.js文件
- webpack.config.js 内容配置文件
配置内容如下：
const path = require('path'); //处理路径
const config = {
entry:'./src/js/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'dist'), //出口路径配置
filename: 'js/dist.js' //出口文件名
},
module: { //配置loader
rules: [
]
},
plugins:[ //plugins配置
],
mode:'development' //开发环境模式
};
module.exports = config;
在mywebpack目录下执行webpack 命令就可以看见多出来的dist文件夹
3.2 打包html文件资源
安装 html-webpack-plugin 包
在mywebpack文件夹下创建index.html文件
引入html-webpack-plugin并在plugins配置中写上如下代码：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
plugins:[
new HtmlWebpackPlugin({
template : './src/index.html'
})
]
运行webpack指令
3.3 打包css资源
npm i mini-css-extract-plugin css-loader style-loader
注意：不同文件必须配置不同的loader 处理,若是less文件，则还需要安装less-loader less
修改配置文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const config = {
entry:'./src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/dist.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
}
]
},
plugins:[
new HtmlWebpackPlugin({
template : './src/index.html'
}),
// 使用单独生成css文件的插件，打包时会将css文件独立出去
new MiniCssExtractPlugin({
// 指定文件的输出路径和文件名
filename: 'css/index.css'
})
],
mode:'development'
};
module.exports = config;
3.4 打包图片资源
npm i html-loader -D
在module中添加如下代码
{
//打包图片资源 处理 css 文件的 img背景 图片
test:/\.(jpg|png|gif)$/,
type: 'asset/resource',
generator:{
filename:'img/[hash:10][ext]',
},
},
{
// 处理 html 文件的 img 图片
test:/\.html$/,
loader:'html-loader',
},
3.4 打包字体资源
{
//打包图标字体资源
test: /\.(ttf|eof|woff2)$/,
type: 'asset/resource',
generator:{
filename:'font/[hash:10][ext]',
},
}
3.5 打包其它资源
{
//打包图标字体资源
exclude: /\.(ttf|eof|woff2|css|html|js|png|gif|jpg)$/,
type: 'asset/resource',
generator:{
filename:'other/[hash:10][ext]',
}
}
3.6 热更新 devServer
注意：devServer选项和plugins，mode平级
devServer: {
//热加载 npx webpack server
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
open: true
},
当运行npx webpack server的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。
四、兼容性处理以及压缩
4.1 css兼容性处理
nom i postcss-loader postcss-preset-env -D
在package.json中添加如下配置
"browserslist": {
// 开发环境
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境：默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
在rules中添加如下
{
//打包css文件
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{}
],
],
},
}
}
]
},
如是开发环境，还需要在最外面添加
// 设置nodejs环境变量
process.env.NODE_ENV = ‘development’;
4.2 压缩 css
npm install css-minimizer-webpack-plugin --save-dev
注意： optimizationz 选项和plugins，mode等平级
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
optimization: {
//这将使CSS优化只在生产模式。
// 如果你想在开发中运行它，设置优化。最小化选项为true:
minimizer: [
new CssMinimizerPlugin(),
],
minimize: true,
},
4.3 js语法检测
npm install eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import --save-dev
在package.json中配置
"eslintConfig":{
"extends":"airbnb-base"
}
在plugins中添加：
const ESLintPlugin = require('eslint-webpack-plugin');
new ESLintPlugin(
{
extensions: ['js'],
context: path.resolve('src'),
exclude: '/node_modules',
fix: true
}
)
4.4 js兼容处理
npm install -D babel-loader @babel/core @babel/preset-env core-js
//在rules中配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
},
4.5 js压缩
模式直接变为生产环境就是压缩
mode:'production'
4.5 HTML压缩
//HtmlWebpackPlugin中添加
new HtmlWebpackPlugin({
template : './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
五、总结
汇总以上知识点，完整代码为：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
// 设置nodejs环境变量
process.env.NODE_ENV = 'development';
const config = {
entry:'./src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/dist.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{}
],
],
},
}
}
],
},
{
//打包图片资源 处理 css 文件的 img背景 图片
test:/\.(jpg|png|gif)$/,
type: 'asset/resource',
generator:{
filename:'img/[hash:10][ext]',
},
},
{
// 处理 html 文件的 img 图片
test:/\.html$/,
loader:'html-loader',
},
{
//打包图标字体资源
test: /\.(ttf|eof|woff2)$/,
type: 'asset/resource',
generator:{
filename:'font/[hash:10][ext]',
},
},
{
//打包图标字体资源
exclude: /\.(ttf|eof|woff2|css|html|js|png|gif|jpg)$/,
type: 'asset/resource',
generator:{
filename:'other/[hash:10][ext]',
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template : './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
// 使用单独生成css文件的插件，打包时会将css文件独立出去
new MiniCssExtractPlugin({
// 指定文件的输出路径和文件名
filename: 'css/index.css'
}),
new ESLintPlugin(
//语法检测
{
extensions: ['js'],
context: path.resolve('src'),
exclude: '/node_modules',
fix: true
}
)
],
optimization: {
//这将使CSS优化只在生产模式。
// 如果你想在开发中运行它，设置优化。最小化选项为true:
minimizer: [
new CssMinimizerPlugin(),
],
minimize: true,
},
mode:'development',
devServer: {
//热加载 npx webpack server
static: {
directory: path.join(__dirname, 'build'),
},
compress: true,
port: 9000,
open: true
}
};
module.exports = config;
以上笔记参照了尚硅谷视频讲解、官方网站、其他博客，若有不足或者错误的地方，麻烦各位老铁指点出来
