Salida: configurar la opción de salida puede controlar cómo el paquete web escribe archivos compilados en el disco duro. Tenga en cuenta que aunque pueden existir varios puntos de entrada , solo se especifica una configuración de salida .
Primero inicializamos un proyecto npm init , instalamos webpack y webpack-cli localmente, luego creamos las carpetas index.html , webpack.config.js y src en el directorio raíz, y creamos un main.js en la carpeta como archivo de entrada.
Una vez completado el trabajo de preparación, queda como se muestra en la figura:
main.js
(){
var div=document.createElement('div')
div.innerHTML="Aprendamos juntos la configuración de exportación~"
devolver div
}
document.body.appendChild(Componente()) index.html
<cuerpo>
<script src="./dist/bundle.js"></script>
</body> packag.json
"scripts": {
"test": "echo "Error: no se ha especificado ninguna prueba" && salida 1",
"build": "webpack" // Agregar}, luego la parte de configuración webpack.config.js
Configurar la opción output puede controlar cómo el paquete web escribe archivos compilados en el disco duro.
Tenga en cuenta que incluso si puede haber varios puntos入口, solo se especifica una configuración输出.
Los siguientes son varios conceptos de configuración de salida:
1.
La ruta de acceso especifica la ubicación de la salida del recurso y el valor requerido debe ser una ruta absoluta , como por ejemplo. :
ruta constante = requerir ('ruta')
módulo.exportaciones={
entrada:'./src/main.js',
producción:{
nombre de archivo: 'paquete.js',
//Establece la ubicación de salida del recurso en la ruta del directorio dist del proyecto: path.resolve(__dirname, 'dist')
},
} Después de Webpack 4, output.path tiene por defecto el directorio dist . A menos que necesitemos cambiarlo, no es necesario configurarlo por separado, por lo que si es webpack4 o superior, puedes escribir:
module.exports={
entrada:'./src/main.js',
producción:{
nombre de archivo: 'paquete.js',
},
} 2. nombre de archivo
La función de nombre de archivo es controlar el nombre de archivo del recurso de salida , que tiene la forma de una cadena. Aquí lo llamo bundle.js , lo que significa que quiero que los recursos se generen en un archivo llamado paquete.js:
module.exports={
entrada:'./src/main.js',
producción:{
nombre de archivo: 'paquete.js',
},
} Después del empaquetado, como se muestra en la figura, se generará automáticamente una carpeta dist con un archivo bundle.js .
El nombre del archivo puede ser no solo el nombre del paquete, sino también una ruta relativa.
No importa si el directorio en la ruta no existe. Webpack creará el directorio al generar recursos, por ejemplo:
module.exports = {.
producción: {
nombre de archivo: './js/bundle.js',
},
}; Como se muestra en la imagen después del embalaje:
En un escenario de entradas múltiples , debemos especificar un nombre diferente para cada paquete generado. Webpack admite el uso de un formulario similar a un lenguaje de plantilla para generar nombres de archivos dinámicamente .
Antes de eso, creamos un nuevo archivo de entrada en src
.
componente de función(){
var div=document.createElement('div')
div.innerHTML="Soy el segundo archivo de entrada"
devolver div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
entrada:{
principal:'./src/main.js',
vender:'./src/vender.js'
},
producción: {
nombre de archivo: '[nombre].js',
},
}; Como se muestra en la imagen después del embalaje:
[name] en el nombre del archivo se reemplazará con el nombre del fragmento, es decir, principal y proveedor. Por lo tanto, al final se generarán vendor.js y main.js
Si desea ver el contenido, debe cambiar el contenido en index.html y hacer coincidir la ruta con el último paquete empaquetado
<body>.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Pregunta] Habrá una necesidad en este momento. ¿Cómo podemos hacer que
index.htmlagregue automáticamente el paquete generado a html por nosotros? El complemento HtmlWebpackPlugin se puede usar aquí. Consulte los detalles a continuación.
3.
Además de [name] que puede hacer referencia al nombre del fragmento, hay varias otras variables de plantilla que se pueden usar en la configuración del nombre de archivo:
Pueden: controlar la caché del cliente
[hash] y [chunkhash] están directamente relacionados con el contenido del fragmento. Si se usan en el nombre del archivo, cuando el contenido del fragmento cambia, también puede hacer que cambie el nombre del archivo de recursos. que el usuario descargará inmediatamente la nueva versión la próxima vez que solicite el archivo de recursos sin utilizar el caché local.
[query] también puede tener un efecto similar, pero no tiene nada que ver con el contenido del fragmento y el desarrollador debe especificarlo manualmente.
4. publicPath
publicPath es un elemento de configuración muy importante, que se utiliza para especificar la ubicación de la solicitud de recursos.
Tome la carga de imágenes como ejemplo
para importar Img desde './img.jpg';
componente de función() {
//...
var img = nueva Imagen();
myyebo.src = Img //Solicitar URL
//...
} {
//...
consulta: {
nombre: '[nombre].[ext]',
ruta de salida: 'static/img/',
ruta pública: './dist/static/img/'
}
} Como se muestra en el ejemplo anterior, la dirección de solicitud de imagen original es ./img.jpg , pero después de agregar publicPath a la configuración, la ruta real se convierte en ./dist/static/img/img.jpg , por lo que las imágenes se pueden obtener desde Recursos empaquetados.
Hay 3 formas de publicPath:
relacionadas con HTML.
Podemos especificar publicPath como la ruta relativa de HTML. Al solicitar estos recursos, la ruta del HTML de la página actual se agregará a la ruta relativa para formar la URL de solicitud real.
//Supongamos que la dirección html actual es: https://www.example.com/app/index.html //El recurso cargado de forma asincrónica se llama 1.chunk.js ruta pública:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
Relacionado con el host
Si el valor de publicPath comienza con "/", significa que publicPath en este tiempo comienza con El nombre de host de la página actual es la ruta base
// Supongamos que la dirección html actual es: https://www.example.com/app/index.html //El recurso cargado de forma asincrónica se llama 1.chunk.js ruta pública:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
Relacionado con CDN
Las dos anteriores son rutas relativas. También podemos usar la ruta absoluta para configurar publicPath
. La situación generalmente ocurre cuando se colocan recursos estáticos en CDN. Dado que su nombre de dominio no es consistente con el nombre de dominio de la página actual, debe especificarse en forma de ruta absoluta
cuando publicPath comienza en forma de encabezado de protocolo o relativo
.protocolo, significa que la ruta actual está relacionada con CDN
// Supongamos que la dirección html actual es: https://www.example.com/app/index.html //El recurso cargado de forma asincrónica se llama 1.chunk.js ruta pública:"http://cdn.com/" //-->http://cdn.com/1.chunk.js ruta pública:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Entrada única
El requisito mínimo para configurar el atributo output en el paquete web es establecer su valor en un objeto, incluidos los dos puntos siguientes:
filename es el nombre del archivo de salida.path del directorio de salida de destinomodule.exports={
entrada:'./src/main.js',
producción:{
nombre de archivo: 'paquete.js',
},
}
// Después del paquete web 4, se generará dist de forma predeterminada, por lo que la ruta se omite aquí 2. Múltiples entradas
Si la configuración crea múltiples "fragmentos" separados, debe usar marcadores de posición para asegurarse de que cada archivo tenga un nombre único
. se utiliza aquí. [name] del nombre de archivo mencionado
Además, si desea colocar estos recursos en la carpeta especificada, puede agregar la configuración path
module.exports={.
entrada: {
principal: './src/main.js',
vender: './src/vender.js'
},
producción: {
nombre de archivo: '[nombre].js',
ruta: __dirname + '/dist/assets' //Especifique que el paquete empaquetado se coloque en el directorio /dist/assets}
}
// Generar después del empaquetado: ./dist/assets/main.js, ./dist/assets/vender.js Los problemas restantes anteriores en este capítulo se pueden resolver utilizando el complemento HtmlWebpackPlugin
Instale el complemento
npm install --save-dev html-webpack-plugin
configure el complemento
const HtmlWebpackPlugin=require('html-webpack-plugin') //Cargar módulo module.exports = {
entrada:{
principal:'./src/main.js',
vender:'./src/vender.js'
},
//Agregar complementos complementos:[
nuevo HtmlWebpackPlugin({
título:'gestión de resultados'
})
],
producción: {
nombre de archivo: '[nombre].js',
},
}; Una vez completado el empaquetado
, encontrará que aparece un nuevo index.html en dist, que agrega automáticamente los recursos generados para nosotros. Después de abrirlo, encontrará que el navegador mostrará el contenido.
Esto significa que no necesitará escribir index.html al inicializar un proyecto en el futuro.
El código fuente se puede obtener aquí:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. archivos