Webpack basado en el uso de los archivos de configuración y el modo de procesamiento (basados en la foto) (a)

1. Introducción

webpack sigue siendo una moderna aplicación js embalaje módulo de herramientas

El extremo frontal modular

■ modular front-end :

• En el estudio anterior, he utilizado una gran cantidad de espacio para explicar por qué la necesidad de modular frontal.
• Y también he mencionado una serie de programas utilizan actualmente front-end modular: AMD, CMD, CommonJS, ES6.
• Antes ES6, queremos ser desarrollo modular, hay que recurrir a otras herramientas, por lo que podemos estar de desarrollo modular.
• Y tras la finalización del proyecto para desarrollar un sistema modular, también es necesario para las dependencias de la manija entre los distintos módulos y su paquete de integración.
• Aquel webpack del núcleo es para hacer posible un desarrollo modular, y ayudará a hacer frente a las dependencias entre módulos.
• Y no sólo el archivo JavaScript, nuestro CSS, imágenes, archivos JSON en webpack etc se puede utilizar como módulos en uso (en adelante vamos a ver
  a).
• Esta es webpack en un concepto modular.

■ Paquete Cómo entenderlo?

• Después webpack puede ayudarnos a entender el modular, y hacer frente a la compleja relación entre los módulos, envasados ​​muy buen concepto de entender.
• Es a webpack varios módulos de recursos envasados ​​combinan en uno o más paquetes (paquete).
• Y en el proceso de envasado, también pueden ser procesados ​​por los recursos tales como imágenes comprimidas, el turno SCSS en css, se convertirán en ES5 ES6 gramática gramática, mecanografiado se convertirá en JavaScript, etc. operaciones
• Sin embargo, la operación de envasado parece ronco / trago nos puede ayudar, que tienen lo más da?

Y ronco comparativo / trago de

■ núcleo ronco / trago de una tarea

• Podemos configurar una serie de tareas, y la tarea de definir el procesamiento de transacciones (por ejemplo ES6, ct conversión, compresión de imágenes, a su vez SCSS en css)
• Luego dejar / trago ronco con el fin de realizar la tarea, y toda la automatización de procesos.
• Así ronco / trago conocido también como herramienta de gestión automática de tareas de front-end.

■ Echemos un vistazo a un trago de tareas

• La siguiente tarea es convertir todos los archivos de la siguiente src js en una sintaxis de ES5.
• Y la salida final a la carpeta dist.

■ Cuando un gruñido / trago que?

• Si su proyecto es muy simple dependencia de módulos, e incluso no utilizó el concepto de modularidad.
• Sólo necesita un simple fusión, compresión, utilice el ronco / trago a.
• Pero si todo el proyecto utilizando modular de gestión, y la interdependencia es muy fuerte, se puede utilizar un motor más potente webpack.

■ Así, ronco / trago y webpack diferente?

• ronco / trago más énfasis en el extremo frontal del proceso está automatizado, modular de su núcleo.
• webpack mayor énfasis en el desarrollo modular y de gestión, y la fusión de compresión de archivos, el pretratamiento y otras funciones, está dotado de una función.

const gulp = require('gulp');
const babel = require(' gulp-babel');

gu1p.task('js'，() =>
     gulp.src('src/*.js')
    .pipe(babel({
         presets: ['es2015']
     }))
    .pipe(gu1p. dest('dist'))
);

2. Instalar

• webpack instalación de primera necesidad de instalar Node.js, Node.js viene con el MNP herramientas de gestión de paquetes
• Para comprobar la versión de nodo:

node -v

• Global instalado webpack (aquí me gustaría para especificar el número de versión 3.6.0, ya que depende CLI2 vue de la versión)

npm install webpack@3.6.0 -g

• (Se requiere Seguimiento) montado localmente webpack
  -save dependiente dev es el desarrollo, el proyecto no es necesario seguir utilizando el paquete.
  el correspondiente directorio cd

npm install webpack@3.6.0 --save -dev

• ¿Por instalado el mundial, también es necesario para instalarlo localmente?
  webpack --versionCheque no instalado
  en el comando ejecutado directamente webpack terminal, el webpack instalada mundial utiliza
  cuando las secuencias de comandos definidos en el package.json, que contiene comandos webpack, a continuación, utilizar los locales webpack

3. Arranque

Analizar archivos y carpetas:

• carpeta dist: Después de que el archivo se envasa para su almacenamiento
• carpeta src: Escribimos para almacenar archivos de origen
  main.js: archivo de entradas para el proyecto. Detalles vea abajo para más detalles.
  mathUtils.js: define alguna función matemática herramientas se puede hacer referencia en otros lugares, y el uso.
• index.html: navegador abre el html Mostrar página de inicio
• package.json: por NPM genera init, el archivo de gestión de paquetes NPM (temporalmente sin acceso a, sólo por detrás de gastar)

archivos empaquetados js

■ archivo ahora js utilizando un enfoque modular para el desarrollo, que pueden utilizar directamente? No.

• Porque si se incorporan directamente en el archivo index.html que tanto js, ​​el navegador no reconoce que el código modular.
• Además, en un proyecto real cuando hay muchos archivos tales js, citamos una muy molesto, y el último es muy inconveniente para su gestión.

■ ¿cómo debemos hacerlo? Herramienta de uso webpack de archivo varias js se envasa.

• Sabemos que. webpack es una herramienta de embalaje modular, que nos apoya en la escritura de código modular que puede ser procesada código modular.
• Además, después de procesar si las relaciones entre todos los módulos, una pluralidad de JS envasados ​​- JS un archivo, después de la introducción se hace muy conveniente.

■ OK, cómo empaquetarlo? Las instrucciones para usar webpack
webpack src / main.js dist / bundle.js

4. Configurar

Consideramos que, si webpack de comandos deben ser negociado entrada y la salida como un argumento, muy molesto, ¿hay una manera de escribir la configuración de los dos parámetros se pueden leer directamente en tiempo de ejecución, con este fin, hemos creado una webpack.config.jsexpediente

Este enlace también está en el error puede aparecer corriendo, intente ejecutar el código siguiente
ERROR error de empaquetado webpack en ./src/main.js ./dist/bundle.js múltiples

 webpack ./src/main.js -o ./dist/bundle.js

¿Cómo resolver este problema, el camino de la siguiente casos

bundle.js archivo empaquetado puede ser invocado en la página index.html

package.json inicio definido

■ golpearse de ejecución para - cadenas largas ¿Se siente incómodo de hacer
Podemos definir su propio package.json la ejecución del script de guiones.
■ se ejecuta package.json en los guiones de la secuencia de comandos, se encuentra la ubicación del comando correspondiente a un cierto orden.

• En primer lugar, el comando buscará .modules node_ locales / .bin ruta correspondiente.
• Si no se encuentra ninguno, se irá variable de entorno global para encontrar.
• Cómo llevar a cabo nuestro mando construirlo?

npm ruin build


estepackage.jsonDentro de contenidos problema equivocado puede ser un problema de software, intente cambiar el software intente, tengo un problema con WebStorm abrir ningún problema con la idea de

que habrá una carpeta node_module que después del final de la carrera

Cada paquete va a escribir de nuevo webpack ./src/main.js -o ./dist/bundle.js inconveniente

webpack instalación local

■ En la actualidad, webpack estamos usando el webpack global, si queremos usarlo localmente para empacar?

• Dado que los proyectos son a menudo dependen de una versión particular de webpack, la versión global de esta webpack podría ser inconsistentes versiones del proyecto, problemas de embalaje de exportación.
• Por lo general, es un proyecto tiene su propio webpack local.

■ El primer - paso. El proyecto tendrá que instalar su propio local de webpack

• Aquí dejamos que el webpack3.6.0 instalación local
• CL3 vue se ha actualizado a webpack4. Pero será perfiles esconderse, por lo que la vista no es muy conveniente.

npm install webpack@3.6.0 --save- dev

■ un segundo paso ,. Módulos / .bin / webpack comiencen webpack empaquetado por el Nodo


webpack correr en los dos terminales o globales es
posible ./node_modules/webpack, se puede llevar a cabo conseguido localmente

uso 5.loader

Pero el paquete css se quejará directamente

para cargar el archivo CSS correspondiente debe tener un cargador correspondiente
https://webpack.js.org/

archivo de configuración de la instalación

npm install --save-dev css-loader

Configurar contenido complementario

después de completar la construcción en ejecución NPM

• Debido css-loader sólo es responsable del fichero css a la carga, y el estilo-loader es responsable para el estilo de la Catedral
• webpack loader lectura usado en el proceso, de acuerdo conDe derecha a izquierdaLa lectura orden

De manera que descarga el archivo de configuración de estilo-loader

npm install --save-dev style-loader

menos manipulación de documentos

Instalar el cargador correspondiente

npm install --save-dev less-loader less

webpack.config.js modificado configuración, después de añadir la NGP RUN Build

menos de archivos

main.js añadido dependiente

efecto operación index.html (nota para un archivo de script bundl.js Incorporated)

manejo de archivos de imagen

(11.png <límite <timg.jpg)


安装loader

npm install --save-dev url-loader

Modificar el archivo de configuración

npm run buildde carrera,
aparecerá el errorModule build failed: Error: Cannot find module 'file-loader'

Cuando la carga es mayor que el límite de la imagen, es necesario el uso del módulo de archivos cargador se carga(Esto es algo que he 11.png sustituye timg.jpg, y lo que no es mayor que el caso límite)

del cargador instalado

cnpm install --save-dev file-loader

NPM plazo de construcción en ejecución, completa el conjunto de imágenes
(Menor que el límite no aparece cuando se envasa? ? ? ? ? ? ? ? ? ? ? ? ?
Metí paquete dist no está en la imagen img correr 11 muestra también)

• Encontramos ayuda webpuck a generar automáticamente un nombre muy largo
  , que es un valor hash de 32 bits. Japón es evitar la duplicación de nombres
  , pero el desarrollo de bienes, que puede tener que imaginar el nombre del paquete - conjunto de requisitos
  , por ejemplo, las configuraciones de todas las imágenes en un archivo central, a la par con el nombre original de la imagen, a la vez que evitar la duplicación
• Por lo tanto, podemos añadir las siguientes opciones en las opciones:
  img: Lucha como un archivo en una carpeta
  nombre: Obtener películas domésticas nombre original. En esta posición,
  picadillo: 8 : Con el fin de evitar los conflictos de nombre de imagen fija utilizan hachís, pero conservan sólo ocho
  ext: Extensión original de usar el parche

Los archivos que se empaquetan en una carpeta / [Fotos adquirió el nombre original, en esa posición]. [Valor Hash]. [Imagen extensión original]

• Sin embargo, encontramos hoja de la resistencia no se presenta, debido a que el camino no es correcto utilizar la imagen
  por defecto, generará camino directo webpack Unidos el uso de la fila de atrás
  , sin embargo, debido a que todo nuestro programa es la reproducción del archivo rápido bajo dist , por lo que aquí tenemos que añadir en el camino de un dist /

NPM plazo de construcción (tenga en cuenta la imagen ilegible nombre antes, retire primero)

de ejecución index.html, los cambios de fondo son completa

procesamiento .ES6 sintaxis

■ Si se lee detenidamente los archivos js webpack envasados, descubrir y sintaxis ES6 escritura no se convierta en ES5, entonces podría significar - para algunos no hay manera navegador no soporta ES6 buen funcionamiento de nuestro código.
■ En la parte delantera hemos dicho, si desea convertir en ES6 sintaxis ES5, entonces es necesario utilizar Babel, mientras que en webpack, utilizamos directamente la babel cargador correspondiente en él. --save-devEstán vinculadas

cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015

■ webpack.config.js archivo de configuración

■ empaqueta npm run buildvista bundle.js archivo y encontró su contenido en una sintaxis de ES5 (ES6 se puede ver en la const se han convertido en un VAR)

(De acuerdo con el "coderwhy" por encima de microblogueo acabado de vídeo vue por supuesto)