webpack概念
webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件 F插件需要A插件)生成浏览器可以识别静态资源
Vue 前期脚手架就是用webpack制作
(Vue 开始推荐vite构建工具(更快))
react脚手架
angular等现代框架脚手架都是依赖webpack
webpack的安装
首先需要建一个文件夹【也可以在命令提示符里边 md pack创建一个叫pack的文件夹 然后cd pack进入这个文件夹 】
初始化项目
npm init -y
//-y是选项yes
安装webpack与webpack脚手架
npm i webpack webpack-cli -D
然后文件夹里会生成一系列文件夹,然后可以在文件夹里新建一个dist【存放页面】
在package.json的 "scripts": {}放一个 "build": "webpack",
"scripts": {
"build": "webpack",
"serve": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
打包命令
npm run serve
搭建本地服务器
npm i webpack-dev-server -D
配置本地服务器
devServer: {
port: 8080,
hot: true,//采用热更新
host: "localhost",//域名
open: true,//默认自动打开浏览器
proxy: {}//vue.config.js代理一致
}
拓展
npm i css-loader style-loader -D
作用 css-loader处理css文件 style-loader把加载好的css放入style标签
npm i clean-webpack-plugin -D
作用:清零dist目录(执行npm润build需要清理上一次的生成内容)
webpack核心概念
入口entry
项目运行的起点
告诉webpack从哪里开始打包
出口output
打包好放入哪
filename文件名
path路径
模式mode
产品模式production
开发模式development
loader加载器
webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力
插件plugin
webpack运行生命周期过程中做一些其他任务(压缩,清理)
webpack配置
默认webpack.conflg,js配置文件中
webpack就是一个管理打包的工具,可以对代码进行优化,对css,less、scss等进行打包处理,也可以让JavaScript等高级语言,转换为浏览器所能兼容的一些代码,对低版本的浏览器很友好,其中插件、loader等配置在官方文档可找到。如
配置文件webpack.config.js
const path = require("path");//nodejs核心模块,专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry: './src/main.js',//相对路径
// 输出
output: {
// 文件的输出路径
// __dirname nodejs的变量,代表当前文件的文件夹目录
path: path.resolve(__dirname, 'dist'),//绝对路径
// 入口文件打包输出文件名
filename: "static/js/main.js",
// 自动清空打包结果
// 原理打包前,把path整个目录清空,在进行打包
clean: true,
},
// 加载器
module: {
rules: [
// loader的配置
{
test: /\.css$/i,//只检测。css文件
use: [//执行顺序,从右到左(从上到下)
"style-loader", //将js中css通过创建style标签添加html文件中样式生效
"css-loader",//将css资源编译成commonjs的模块到js中
],
},
{
test: /\.less$/i,
// loader:'xxx'//只能使用一个loader
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',//将less编译成css文件
],//使用多个loader
},
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
{
test: /\.styl$/,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 stylus编译成css文件
'stylus-loader',
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片转base64
// 优点,减少请求数量 缺点:体积会更大
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// [hash:10] hash值取10位
filename: 'static/images/[hash:10][ext]'
}
},
{
test: /\.m?js$/,
exclude: /(node_modules)/,//排除node_modules中的文件
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
}
}
]
},
//插件
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, 'src'),
}),
new HtmlWebpackPlugin({
//模板:以bublic/index.html文件创建新的html文件
// 新的html文件特点:1、结构和原来一致 2、自动引入打包输出的资源
template:path.resolve(__dirname,"public/index.html"),
})
// plugin的配置 plugins: [new ESLintPlugin(options)],
],
// 开发服务器的配置
devServer:{
port: 8080,
hot: true,//采用热更新
host: "localhost",//域名
open: true,//默认自动打开浏览器
proxy: {}//vue.config.js代理一致
},
// 模式
mode: "development",
}
利用npx webpack可打包文件
利用npx webpack serve也可打包文件(需要配置)