No hay nada de malo en aprender el paquete web para ganar la gloria del rey

Introducción al héroe

Weibo Parker nació en la tierra de los guerreros en el lejano oeste. Tiene excelentes habilidades mecánicas y es bueno usando varias herramientas para lograr algunas cosas aparentemente imposibles. Por coincidencia, conocí a un joven Mozi y me hice amigo de él. Más tarde, ayudó al gran maestro Mozi a construir la ciudad más grande del continente, que fue llamada el mayor milagro después del fin de la antigua civilización: ¡Chang'an! Chang'an toma el "Arca" como centro impulsor, con el continuo surgimiento de agencias que custodian el magnífico Palacio Daming. Parker es discreto y no le gusta aparecer en el ojo público. Es un idealista que necesita la iluminación humana y cree que solo la evolución gloriosa puede realizar todo el potencial de la humanidad.

Nombre: Webpack (paquete web)

Ranking de popularidad: T0

Tasa de ganancia: 98%

Tasa de aparición: 80% (90% de proyectos medianos y grandes)

Tasa de prohibición: 10%

Dificultad de operación: ★★★★★

habilidad:

Pasiva: (tecnología de arma mágica de crecimiento personal)

cd: 0 segundos

Pike comenzará con su equipo exclusivo [cargador], que puede proporcionarle atributos, y se puede actualizar a elementos avanzados [complemento] en la tienda para mejorar sus habilidades.

Energía de sifón (entrada entrada)

Parker designó el equipo inicial para comenzar a evolucionar los preparativos, durante los cuales disfruta de una bonificación de resistencia del 20%. Después de actualizar, puede designar varios equipos para evolucionar.

(La entrada se utiliza para especificar el archivo de entrada, se pueden configurar uno o más).

Uso básico:

module.exports = {  entry: './path/to/my/entry/file.js'} // 默认可配置一个路径字符串;

Cadena: la cadena de ruta común predeterminada ./src. Uso avanzado:

1 const config = {
2   entry: './src/a.js'
3 };

Matriz: Pasar una matriz de ruta creará varias entradas principales, lo que es adecuado para importar varios archivos dependientes en un fragmento.

const config = {
  entry: ['./src/a.js','./src/b.js','./src/c.js',]
};

Objeto: Pase un objeto para especificar el valor de la clave (nombre de la entrada) y el valor (ruta) de las diferentes entradas. La cadena de caracteres es la abreviatura del método del objeto. Adecuado para aplicaciones de varias páginas

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

The Evil Shadow: (exportación de salida)

cd: 10 segundos

Parker se teletransportará a la ubicación designada después de n (según la complejidad del trabajo actual de Parker) segundos de canto.

(La salida se utiliza para configurar la salida y el nombre del archivo empaquetado. El estándar mínimo para configurar la salida es establecer un objeto para incluir los dos puntos siguientes :)

nombre de archivo El nombre del archivo de salida
ruta La ruta absoluta del directorio de salida

Uso básico:

const path = require('path');

module.exports = {
  entry: './src/js/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test.bundle.js'
  }
};

Uso avanzado:

Cuando se configuran varios archivos de entrada y desea generar diferentes fragmentos, debe usar marcadores de posición para el nombre del archivo para garantizar la unicidad del nombre del archivo.

Marcador de posición:

nombre-use el nombre de la entrada
id-use ID de fragmento interno
Hash: use el hash único en cada proceso de compilación
chunkhash-use un hash basado en el contenido de cada fragmento
nombre de archivo de uso de consulta? Cadena detrás

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

Cargador

cd: 8 segundos

Pike puede asimilar las habilidades de otros héroes y convertirlas en energía utilizable. Lograr absorber atributos básicos + 200%.

(Webpack en sí solo puede procesar archivos js. Loader puede convertir otros tipos de archivos en módulos que pueden ser procesados por webpack y empaquetarlos o realizar otras operaciones. Se usa junto con el módulo de módulos y se implementa configurando module.rules. Loader es equivalente a otra tarea en la herramienta).

El núcleo del cargador tiene dos atributos:

prueba: coincide con archivos que necesitan ser convertidos por el cargador
uso: especifique qué cargador convertir

Configuracion basica:

const path = require('path');

const config = {
  output: {
    filename: 'test.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

Configuración avanzada:

Las reglas le permiten configurar varios cargadores al procesar un archivo, solo necesita pasar una matriz para usar que contenga diferentes objetos de cargadores

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

Operación Sao: ¡Se puede usar en la declaración de importación! Separe el cargador en el recurso, de modo que pueda usar un método en línea para el procesamiento del cargador sin configurar el paquete web, pero este método no se recomienda porque es difícil de mantener.　　

import Styles from 'style-loader!css-loader?modules!./styles.css';

Evolución gloriosa (complementos)

cd: 35 segundos

Parker evoluciona el cargador, a través del complemento, amplifica y fortalece a tus héroes dentro de las 5000 yardas y entra en el estado dominante durante 10 segundos.

(A diferencia del cargador que se usa para analizar tipos de archivos que no son js, el complemento se puede usar para manejar tareas más complejas, incluido el empaquetado, la optimización, la compresión y la redefinición mínima de las variables de entorno. Es muy poderoso, excepto por los complementos maduros proporcionados por el mercado de complementos, también puede escribirlo usted mismo. El complemento aporta más funciones al cargador, y su propósito es resolver otras cosas que el cargador no puede lograr.

Solo lo necesita require（）para usar un complemento y luego agregarlo al módulo de complemento. Por lo general, la mayoría de los complementos son personalizables. Por lo tanto, si desea usar complementos con diferentes funciones de configuración en un archivo de configuración, debe cree una nueva instancia a través de new. )

Configuracion basica:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Personalidad dual (modo de modo)

cd: 1,5 segundos

Modo de cambio de Parker, modo adicto al trabajo: velocidad de movimiento aumentada en un 50%, modo de artista: ralentiza en un 30% mientras aumenta su propia resistencia en un 50%, control inmunológico.

(Al modeconfigurar el entorno de desarrollo (desarrollo) y el entorno de producción (producción), puede habilitar la optimización incorporada del paquete web en el modo correspondiente).

development：启用NamedChunksPlugin和NamedModulesPlugin插件

production：启用
    FlagDependencyUsagePlugin,
    FlagIncludedChunksPlugin, 
    ModuleConcatenationPlugin, 
    NoEmitOnErrorsPlugin, 
    OccurrenceOrderPlugin, 
    SideEffectsFlagPlugin和 UglifyJsPlugin插件。

Configuración:

module.exports = {
  mode: 'production' // 或development
};

Brilliance of the Wise (análisis del módulo reslove)

cd: 60 segundos

Parker ingresa al modo de búsqueda de ruta rápida en la ubicación designada y analiza automáticamente la ruta más cercana, ignorando los obstáculos del terreno.

(Al configurar resolve para resolver la ruta del archivo, reslove se puede configurar para usar complementos exclusivos).

Actualmente admite la resolución de tres rutas de archivo: ruta absoluta, ruta relativa, ruta del módulo

Configurar alias (el más utilizado)

La creación de alias para importar o requerir puede facilitar la introducción del módulo. ejemplo:

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

No se configura ningún alias:

import Utility from '../../utilities/utility';

Alias ya configurado:

import Utility from 'Utilities/utility';

Caja del tesoro (módulo módulo)

Parker tiene un espacio que puede almacenar cualquier material y puede almacenar equipos en categorías. Después de la activación, la barra de equipo aumentará en 3 y la velocidad de movimiento se reducirá en un 20%.

(Configurando el módulo para manejar diferentes tipos de módulos en el proyecto.) Reglas que coinciden con la matriz de reglas (más comúnmente utilizada) Al crear un módulo, haga coincidir la matriz de reglas solicitada. La forma en que se crea el módulo se puede modificar mediante reglas. Estas reglas pueden aplicar cargadores a módulos o modificar analizadores.

const config = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};

Producción recomendada

Procesamiento de archivos

raw-loader Cargue el contenido original del archivo (utf-8)
val-loader Ejecute el código como un módulo y convierta las exportaciones a código JS
url-loader Funciona como un cargador de archivos, pero si el archivo es más pequeño que el límite, puede devolver la URL de datos
file-loader Envíe el archivo a la carpeta de salida y devuelva la URL (relativa)

JSON

json-loader Cargar archivo JSON (incluido por defecto)
json5-loader Cargar y traducir archivos JSON 5
cson-loader Carga y traducción de archivos CSON

Transpiling

script-loader Ejecute el archivo JavaScript una vez en el contexto global (como en la etiqueta del script) sin analizar
babel-loader Cargue el código ES2015 + y luego use Babel para traducir a ES5
buble-loader Use Bublé para cargar el código ES2015 + y traducir el código a ES5
traceur-loader Cargue el código ES2015 +, luego use Traceur para traducir a ES5
ts-loader O awesome-typescript-loader carga TypeScript 2.0+ como JavaScript
coffee-loader Cargar CoffeeScript como JavaScript

Plantillas

html-loader Exportar HTML como una cadena, es necesario citar recursos estáticos
pug-loader Cargue la plantilla Pug y devuelva una función
jade-loader Carga la plantilla de Jade y devuelve una función
markdown-loader Traducir Markdown a HTML
react-markdown-loader Utilice el analizador de análisis de Markdown para compilar Markdown en los componentes de React
posthtml-loader Utilice PostHTML para cargar y convertir archivos HTML
handlebars-loader Transferir manillares a HTML
markup-inline-loader Convierta archivos SVG / MathML en línea a HTML. Muy útil cuando se aplica a fuentes de iconos o cuando se aplica animación CSS a SVG.

estilo

style-loader Agregue la exportación del módulo como estilo al DOM
css-loader Después de analizar el archivo CSS, use la importación para cargar y devolver el código CSS
less-loader Cargar y traducir MENOS archivos
sass-loader Cargar y traducir archivos SASS / SCSS
postcss-loader Utilice PostCSS para cargar y traducir archivos CSS / SSS
stylus-loader Carga y traducción de archivos Stylus

Linting && Testing

mocha-loader Utilice la prueba de moca (navegador / NodeJS)
eslint-loader Precargador, use ESLint para limpiar el código
jshint-loader Precargador, use JSHint para limpiar el código
jscs-loader Precargador, use JSCS para verificar el estilo del código
coverjs-loader Precargador, use CoverJS para determinar la cobertura de la prueba

Marco (marcos)

vue-loader Carga y traducción de componentes de Vue
polymer-loader Use el preprocesador para procesar y requiera () similar a los componentes web de primera clase
angular2-template-loader Cargar y trasladar componentes angulares

Complementos de uso común

ProgressPlugin(Incluido con el paquete web): se usa para contar el progreso del empaque
IgnorePlugin(Incluido con el paquete web): ignore algunos módulos locales
DllPlugin(Incluido con el paquete web): archivos preempaquetados
DllReferencePlugin(Incluido con el paquete web): el empaquetado del proyecto hace referencia a archivos preempaquetados
AssetsWebpackPlugin： Genere pautas de referencia de ruta para js empaquetados, etc.
HappyPack: Use multi-core para acelerar el empaque
ExtractTextPlugin: Separe el CSS en el paquete
EnvironmentPlugin(Incluido con el paquete web): Defina las variables globales que se pueden usar en el proyecto a nivel del paquete web
DefinePlugin(Incluido con el paquete web): Defina las variables globales que se pueden usar en el proyecto en el nivel del paquete web y la forma de EnvironmentPlugin es diferente.
CleanWebpackPlugin: Limpia archivos en el directorio especificado
CopyWebpackPlugin: Asigna los archivos del directorio especificado al directorio especificado
HtmlWebpackPlugin： La página HTML se genera automáticamente después de empaquetar el paquete web
ParallelUglifyPlugin: compresión acelerada

La presentación de los héroes en este número ha terminado. Les deseo todo lo mejor del país lo antes posible. Nos vemos la próxima vez.

Puede ver la página en el mini programa