Sobre webpack Creo que la mayoría de los ingenieros de front-end están familiarizados con, y también se utilizan a menudo. Pero entonces, la mayoría de las veces son una toma directa de un andamio viaje directo, con algo al respecto, pero no saber el por qué de esta marca estado de la gente incómoda. Así que toma ventaja de la reciente ocupado, y rápidamente toda la ola;
webpack está haciendo en?
Con mi propia comprensión de la palabra es, cuanto más archivos utilizados en el proyecto, como js, css, .less, .png y por lo que un buen número de archivos procesados en uno o varios archivos html, y citan simplemente alejarse a.
Embalaje tenue?
La más obvia, una carga de la página de carga de un grupo de js js, un montón de CSS, la velocidad, la velocidad montón evidente de imágenes. Hay empacar el código se comprime, no es fácil para alguien más para llegar a conocer. Página tradicional F12 sólo un poco, lo que con el marco, puede obtener una idea clara acerca de la estructura básica. La demanda de carga, yo uso lo que me di por lo general, no se añade al código, que podría reducir la cantidad de código. También algunos otros beneficios (piensa en él en Canadá, se ríe).
Canto comenzó a aprender
En primer lugar ajustar un par de elementos de configuración esenciales:
const path=require('path');// nodejs里面的路径模块
module.exports={
// 入口
entry:{
app:'./src/index.js',
},
// 输入
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist'),
},
// 文件解析器
module:{
rules:[]
},
// 插件
plugins:[],
}Estos cuatro son el mayor número de elementos de configuración críticos:
la entrada es decirle webpack dónde comenzar a empacar su código, éste debe tener uno o más
la salida se le dice webpack terminó de empacar mi código Jiaosha (nombre de archivo), donde (ruta), que empaqueta en unos pocos (dependiendo de la entrada unos pocos)
módulo es determinar cómo tratar con css, menos, png y una serie de archivos no JS, de uso común css-loader, estilo-loader, archivo-loader , el uso específico es el siguiente:
module:{
rules:[
{test:/\.(css|less)$/,use:['style-loader','css-loader']},
{test:/\.(png|svg|jpg|gif)$/,use:['file-loader']},
{test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']}
]
},Con exámenes regulares de sufijo, el uso para determinar la necesidad de utilizar el cargador, pero también incluye otros parámetros para determinar la carpeta de archivos en el interior del mango
plugins se utiliza para configurar una serie de plugins para ayudar en el embalaje, tenga en cuenta que esto es una matriz, que es un ejemplo de un nuevo punto de
. . . Continuará
