que es paquete web
- webpack es un ataque de creación de recursos de front-end, un paquete de módulos estáticos
Cinco conceptos básicos de webpack
- archivo de entrada de entrada
- Indicación de salida de salida (dónde va la salida)
- loader permite que webpack procese archivos que no sean JavaScript
- complemento de complementos, empaquetado optimizado, compresión
- modo archivo de configuración desarrollo entorno de desarrollo producción entorno de producción
Inicializar el proyecto
npm init
Instalar paquete web
npm i webpack webpackcli -D
problemas de compatibilidad del paquete web
- Instale la versión 4 de webpack y la versión 3 de webpack-cli
npm i webpack@4 webpackcli@3 -D
ejecutar paquete web
- entorno de desarrollo
webpack ./src/index.js -o ./build/build.js --mode=development
- Entorno de producción
webpack ./src/index.js -o ./build/build.js --mode=production
webpack puede manejar recursos js/json, pero no recursos css/img
recursos de empaquetado webpack
La diferencia entre el middleware incorporado path.join y path.resolve
- unirse es conectar cada segmento de la ruta, resolver toma '/' como el directorio raíz
- Cuando essolve pasa en un no/ruta, agregará automáticamente el directorio actual para formar una ruta absoluta, y la combinación solo se usa para el empalme de rutas
css\menos empaquetado de recursos
Versión recomendada de cada paquete
Comando de empaquetado webpack
Crear webpack.config.js:
/*
webpack配置文件
作用：指示webpack干哪些活
所有的构建工具都是基于nodejs平台运行的 模块化采用的common.js
*/
const {
resolve} = require('path');
module.exports ={
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
filename: 'build.js',
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules:[
// 详细配置loader配置
{
test: /\.css$/,
// use中的执行顺序 从下到上
// npm i [email protected] [email protected] -D
use: [
// 创建一个style标签将js中的样式资源插入进入
'style-loader',
// 将css文件变成common.js模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
// 将less加载成css文件 [email protected] less npm i [email protected]
'less-loader'
]
}
]
},
// 插件
plugins:[
],
// 模式
mode: 'development' //开发模式
}
Paquete de recursos html
Versión recomendada de cada paquete
/*
loader 下载 使用
plugins 下载 引入 使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
// html-webpack-plugin [email protected]
// 作用：创建一个空的html文件 引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制'./src/index.js' 并自动引入打包输出的所有资源
template : './src/index.html'
})
],
Paquete de recursos de imagen
El paquete utilizado y la versión correspondiente.
- [email protected]
- cargador de [email protected]
- [email protected]
Nota: cierre esModule, de lo contrario, no es necesario importar el cargador de archivos en img
webpack.config.js
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
entry:'./src/index.js',
output:{
filename: 'build.js',
path: resolve(__dirname,'./build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
// 下载两个包 [email protected] [email protected]
// 问题默认处理不了html中img的图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件速度会更慢）
limit: 8 * 1024,
// 问题：因为url-loader在默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析时会出现问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// [hash:10]取图片hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而被url-loader进行处理）[email protected] -D
loader: 'html-loader',
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode: 'development',
}
Empaquetar otros recursos
webpack.config.js
module:{
.......
// 打包其他资源（除了html/js/css资源）
{
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
options: {
name:'[hash:10].[ext]'
}
}
]
},
Uso de webpack-dev-server
descarga del paquete
module.exports ={
......
// 开发服务器 devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：没有输出只会在内存中打包，不会有任何输出
// 启动devServer指令为： [email protected]
devServer:{
contentBase: resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 使用localhost:3000进行查看
port:'3000',
// 自动打开浏览器
open:true,
}
}
Configuración completa del entorno de desarrollo.
webpack.config.js
// 开发环境的配置:能让代码运行即可
const {
resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(jpg||png||jpg)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name:'[hash:10].[ext]'
}
},
{
test: /\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
exclude: /\.(html||css||js)/,
loader: 'file-loader',
options:{
name:'[hash:10].[ext]'
}
}
]
} ,
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
devServer:{
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000,
open: true
},
mode: 'development'
}