webpack打包工具从零到精通
认识webpack
1、 创建一个项目
2、 初始化项目npm init -y 生成一个package.json文件
3、 下载webpack依赖 npm i webpack , npm i webpack-cli -D
4、 npx webpack ./src/index.js --mode=development测试环境
5、 npx webpack ./src/index.js --mode=production 生产环境
配置核心概念
1、entry(入口)
指webpack从那个文件开始打包
2、output(输出)
指webpack导报完的文件输出到哪里去，如何命名
3、loader(加载器)
webpack本身只处理js,json等资源，其他资源需要借助loader,webpack才能解析
4、 plugins(插件)
扩展webpack的功能
5、 mode(模式)
主要两种模式：
开发模式：development
生产模式：production
6、 创建webpack.confing.js在项目根目录
const path = require('path'); // 专门用来加载nodeJS核心模块
module.exports = {
// 入口压缩文件,相对路径
entry: "./src/index.js",
// 输出
output: {
// 文件输出目录__dirname node的变量，代表当前文件夹目录
path: path.resolve(__dirname, "dist"), //绝对路径
// 文件名
filename: "main.js",
},
// 加载器
module:{
rules:[
// loader的配置
]
},
// 插件
plugins: [],
// 模式development(开发)production(生产)
mode: "development",
}
处理资源
1、下载处理css资源能力 npm install --save-dev css-loader ts-loader npm i css-loader
{
test: /.css$/, //只是去检查css文件
use: [ //执行顺序从右到左
'style-loader', // 将js中css通过创建style标签添加到html中生效
'css-loader',// 将css资源遍历到commonjs的模块到js中
],
},
2、处理less资源 npm i less-loader
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
3、 处理sass文件 npm install sass-loader sass webpack --save--dev
{
test: /.s[ac]ss$/,
use: ['style-loader',
'css-loader',
'Sass-loader' //将sass编译为css文件
]
}
4、 图片打包base64
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser:{
dataUrlCondition: {
// 小于200kb图片进行转换base64
// 优点减少请求
maxSize: 250 * 1024,
}
5、 打包资源分类
output: {
// 文件输出目录__dirname node的变量，代表当前文件夹目录
path: path.resolve(__dirname, "dist"), //绝对路径
// 文件名
filename: "static/js/main.js",
clean: true //每次打包前删除原来的资源
},
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser:{
dataUrlCondition: {
// 小于200kb图片进行转换base64
// 优点减少请求
maxSize: 250 * 1024,
}
},
generator:{
filename: 'static/images/[hash:10][ext][query]'
}
}
ESlint配置
module.exports = {
// 解析选项
parserOptions:{},
// 具体检查规则
rules: {},
// 继承其他划
extends : [],
// 其他规则详见: https://zh-hans.eslint.org/docs/latest/use/getting-started
}
1、 vscode下载eslint代码检查插件，容易较早发现错误
2、 下载eslint资源包npm i eslint-webpack-plugin --save--dev
const eslintPlugin = require('eslint-webpack-plugin'); // 配置eslint
3、 配置eslint，通过plugins进行导入
// 插件 配置eslint检查文件
plugins: [new eslintPlugin({
context: path.resolve(__dirname, "src")
})],
4、 在文件需要校验根目录进行配置.eslintrc.js
module.exports = {
// 继承Eslint规则
extends: ["eslint:recommended"],
// 哪里进行适配
env: {
browser: true,
node: true
},
parserOptions: {
ecmaVersion: 6, //es6
sourceType: 'module', //es module
},
// 自定义配置
rules: {
'no-var': 2, // 不能使用var
}
}
5、 配置不要检查eslint文件.eslintignore
dist //表示不检查dist文件
babel编译ts
1、 下载安装babel-loader依赖
npm install -D babel-loader @babel/core @babel/preset-env webpack
2、 配置在rules中， exclude不处理某个文件
rules: [
{
test: /.m?js$/,
exclude: /node_modules/, //排除不处理文件
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
];
处理html资源
1、 下载html资源打包依赖
npm install --save-dev html-webpack-plugin
2、 引入打包
const HtmlWebpackPlugin = require('html-webpack-plugin');
3、 在插件配置plugins中配置
new HTMLWebpack({
// 模板，public/index.html创建模板
// 新文件两个特别：1、结构与原来一致2、自动引入打包资源
template: path.resolve(__dirname,'public/index.html')
})],
开发模式自动化打包
1、 在module.exports配置devSever， 开发服务不会输出资源，在内存中进行编译打包
devServer: {
host: 'localhost', // 服务启动域名
port: '3000', // 启动服务端口号
open: true, // 是否自动打开浏览器
},
解决打包网页闪屏问题
1、 通过单独打包css实现，引入css打包组件
npm install --save-dev mini-css-extract-plugin
2、 在组件中导入，进行初始化
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
{
test: /.css$/, //只是去检查css文件
use: [ //执行顺序从右到左
MiniCssExtractPlugin.loader, // 将js中css通过创建style标签添加到html中生效
'css-loader',// 将css资源遍历到commonjs的模块到js中
],
}
]
plugins: [new MiniCssExtractPlugin()],
解决css打包兼容性问题
1、 通过配置兼容 npm install --save-dev postcss-preset-env
{
test: /.css$/, //只是去检查css文件
use: [ //执行顺序从右到左
MiniCssExtractPlugin.loader, // 将js中css通过创建style标签添加到html中生效
'css-loader',// 将css资源遍历到commonjs的模块到js中
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// 其他选项
},
],
],
},
},
},
],
},
2、 配置浏览器兼容在package.json
"browserslist": [
"last 2 version",
">1%",
"not dead"]
解决代码出错通过source-map计算
devtool: 'source-map'
解决热模块更新HMR，在react中通过react-hot-loader
devServer: {
host: 'localhost', // 服务启动域名
port: '3000', // 启动服务端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启热模块更新
},
解决打包慢问题通过oneOf 、exclude(排除文件不处理)
module:{
rules: [
// 提升打包速度
{oneOf :[
{
test: /.css$/, //只是去检查css文件
use: getStyleLoader(),
},
{
test: /.less$/,
use: getStyleLoader('less-loader')
},
{
test: /.s[ac]ss$/,
use: getStyleLoader('sass-loader')
},
{
test: /.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser:{
dataUrlCondition: {
// 小于200kb图片进行转换base64
// 优点减少请求
maxSize: 250 * 1024,
}
},
generator:{
filename: 'static/images/[hash:10][ext][query]'
}
},
{
test: /.m?js$/,
exclude: /node_modules/, //排除不处理文件
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
],
},
多进程打包
