concepto wabpack
Esencialmente, webpack es una aplicación moderna del módulo de empacador JavaScript estática (módulo bundler). Cuando webpack el procesamiento de aplicaciones, de forma recursiva la construcción de una gráfica de dependencia (gráfica de dependencia), en el que cada módulo comprende aplicación deseada, todos estos módulos a continuación, se empaquetan en una o más de haz.
Usted puede aprender más sobre el módulo y el módulo de JavaScript webpack desde aquí.
A partir v4.0.0 webpack, no se puede introducir un archivo de configuración. Sin embargo, webpack todavía es altamente configurable. Antes de empezar es necesario comprender los cuatro conceptos fundamentales:
La entrada (entrada)
de salida (Output)
Cargador de
enchufe (plugins)
El siguiente ejemplo donde se puede controlar el sitio web oficial de aprender, aquí está mi propia conclusión basada en la web oficial del estudio.
iniciado
html tradicional, se introduce utilizando el código de script depende, esto dará lugar a la contaminación global. ¿Hay una manera de carga a nivel local en JS requeridos, la reintroducción del código dependiente.
Así resolver webpack nuestros problemas, el uso de importación, exportación, tenemos que introducir un dependiente. Detrás de las escenas se webpack código de programa dependiente de las importaciones "traducción" introducido por el navegador puede ser ejecutado.
El uso de un archivo de configuración
Nuevos archivos en el directorio raíz, webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
¿Qué path = require('path');es la biblioteca nodejs.
1, la entrada representativa de un archivo de entrada
2, salida de acuerdo con la entrada del archivo, el archivo de salida generada después de la fuga webpack. Nombre del archivo de salida nombre de archivo, ruta en la que los archivos de salida en el directorio.
Después de la descarga, ejecute el comando
npm install
npx webpack
Ejemplos enlace: demo3- usando un archivo de configuración
escritura de la NGP (Scripts NGP)
Uso NPM guión
npm run build
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
Ejemplos enlace: guión demo4-NPM /
Recursos para la administración
webpack sólo entienden su propia comprensión de JavaScript JavaScript en sí sólo, si usted quiere tratar con CSS, imágenes, etc., necesidad de utilizar el cargador.
cargador de maquillaje webpack capaz de hacer frente a esos archivos que no son de JavaScript (webpack sí sólo entienden JavaScript). cargador puede convertir todo tipo de archivos es válida webpack módulo puede manejar, webpack capacidad continuación, puede utilizar empaquetado, y para procesarlos.
Necesitamos instalar una serie de cargador, por NPM
CSS-Loader
npm install --save-dev style-loader css-loader
Imágenes cargador, cargador de la fuente
npm install --save-dev file-loader
cargador de datos
npm install --save-dev csv-loader xml-loader
Después de instalar el cargador, la configuración del módulo, se pueden introducir estos cargador, webpack lee el archivo de configuración, análisis sintáctico nuestra css, imágenes, y así sucesivamente.
Sobre algunos de la sintaxis del cargador:
los atributos de prueba, las expresiones regulares, los cuales detectan necesitan ser convertidos archivos.
Cuando el uso atributo de la conversión, que debe cargadora uso.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:[
'file-loader'
]
},
{
test:/\.(csv|tsv)$/,
use:[
'csv-loader'
]
},
{
test:/\.xml$/,
use:[
'xml-loader'
]
}
]
}
}
Ejemplos Enlaces: Gestión de Recursos / demo5
Gestión de la salida
Tiene que hacer manualmente el js, css introducción anterior, fotos y otros recursos en index.html, webpack automáticamente de acuerdo con la importación de archivos de configuración, la introducción automática de estos recursos de index.html
Nos HtmlWebpackPlugin plugin para resolver este problema.
Esto es lo que webpack plug-in de uso, presenta una matriz.
instalar el tapón
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Si el proyecto tiene index.html en el directorio dist, cubrirá index.html sintonía, si no se generará automáticamente la carpeta dist y generar index.html
Código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>
Ejemplos enlace: gestión de salida / demo6 /
La limpieza de carpetas / dist
Aquí se utiliza el plugin de limpieza webpack-plugin, el plugin usará para borrar todos los archivos en la carpeta dist.
Se puede tratar de crear un index.js vacío en la carpeta dist, cuando se ejecuta npm run builddespués, se encuentra index.js desaparecieron, dejando sólo los archivos importantes envasados.
instalar el tapón
npm install clean-webpack-plugin --save-dev
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Ahora ejecutar NPM acumulación de ejecución, a continuación, comprobar / carpeta dist. Si todo va bien, debería ahora ya no ver el archivo antiguo, sólo los archivos generados después de la construcción!
desarrollar
El uso de mapa de origen
El proceso de desarrollo, después de webpack empaquetado código fuente, es difícil hacer un seguimiento del código de error, a continuación, puede utilizar el mapa fuente, el archivo de paquete, un error está en su lugar para ayudarnos a depurar.
webpack.config.js
devtool: 'inline-source-map',
Vínculo ejemplos: / dev / DEMO7-Sourcemap /
Seleccione una herramienta de desarrollo
Aquí elección de herramientas de desarrollo significa, ya no ver el código cada vez que la operación de generación, esto es demasiado problema, espero ver es el resultado de la revisión del código, se puede ver el efecto de inmediato.
Hay tres maneras webpack
1, utilizando el modo de observación, los comandos --watch webpack
2, el enchufe webpack-dev-servidor, el más utilizado de esta manera.
3, plug webpack-dev-middleware
modo de observación webpack --watch
directamente para modificar package.json
+ "watch": "webpack --watch",
orden de marcha npm run watch, modificar su código, y luego actualizar el navegador puede ver los resultados después de la modificación.
Esto es muy simple, puede utilizar comandos directamente, pero cada vez que necesite actualizar su navegador. Aquí hay una manera mejor, utilizando plug-ins webpack-dev-servidor o webpack-dev-middleware actualización automática del navegador
enlace de ejemplo: Desarrollo / demo8-reloj /
Uso webpack-dev-servidor
webpack-dev-servidor proporciona un servidor web sencillo para ti, y puede ser recargada en tiempo real (en vivo recarga). Pongamos el siguiente:
npm install --save-dev webpack-dev-server
webpack.config.js
+ devServer: {
+ contentBase: './dist'
+ },
package.json
+ "start": "webpack-dev-server --open",
Ejecutar npm start, a continuación, modificar el código, después de cada vez que se guarda, se puede ver el navegador actualiza automáticamente.
Vínculo ejemplos: Desarrollo / demo9_webpack-dev-servidor /
Uso webpack-dev-middleware
webpack-dev-middleware es un contenedor (contenedor), la transferencia de archivos que puede webpack a un proceso de servidor (servidor). Ahí es donde tenemos que tener un servidor, donde un nodo marco expreso tomar rápidamente un servidor, y el uso webpack-dev-middleware en el interior, la actualización automática.
En primer lugar, instale expresar y webpack-dev-middleware:
npm install --save-dev express webpack-dev-middleware
webpack.config.js
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/'
}
publicPath será utilizado en un script del servidor
Nuevos server.js, este es el código del servidor
package.json
+ "server": "node server.js",
Ejecución del servidor NPM plazo, abrir un navegador, salto a http: // localhost: 3000 , se puede ver los resultados de la ejecución.
Cada vez que se modifica el código, el navegador se actualizará automáticamente.
Vínculo ejemplos: Desarrollo / demo10_webpack-dev-middleware /
