Webpack es una herramienta de front-end para construir secuencias de comandos del módulo de JavaScript para navegadores.
Se puede utilizar similar a Browserify y hacer mucho más.
$ Browserify main.js> bundle.js # Equivaldría a $ Webpack main.js bundle.js
Webpack necesita un archivo de configuración llamado webpack.config.js
que es sólo un módulo de CommonJS.
// webpack.config.js module.exports = { entrada:', ./main.js Salida: { Nombre del archivo: 'bundle.js' } };
Después de tener webpack.config.js
, puede invocar webpack sin ningún argumento.
$ webpack
Algunas opciones de línea de comandos que deben saber.
webpack
- la construcción para el desarrollowebpack -p
- la construcción para la producción (minimización)webpack --watch
- para la construcción gradual continuawebpack -d
- incluyendo mapas fuentewebpack --colors
- Salida de la construcción haciendo bastante
Usted puede personalizar scripts
campo en el archivo de package.json de la siguiente manera.
// package.json { // ... "guiones": { "Dev": "webpack-dev-servidor --devtool eval --progress --colores", "Despliegue": "NODE_ENV = webpack producción -p" }, // ... }
$ NPM i -g webpack webpack-dev-servidor
A continuación, clonar el repositorio.
$ Git clone https://github.com/xxxx.git
Instalar las dependencias.
$ cd WebPack-Demos $ NPM instalar
Ahora, a jugar con los archivos de origen en virtud de los pases pasivos demostración directorios *.
$ Cd demo01 $ Dev NPM plazo
Si el comando anterior no se abre automáticamente el navegador, usted tiene que visitar http://127.0.0.1:8080 por sí mismo.