Cómo crear una aplicación de una sola página vue.js usando webpack
El objetivo principal de este artículo es resumir el uso de webpack en el desarrollo de proyectos y mi propia práctica. Presenta cómo utilizar webpack para empaquetar al desarrollar una aplicación front-end de una sola página vue.js. Este artículo también es una continuación de la serie de artículos de reacción anterior.
Como demostración completa, el proyecto completo de esta serie de artículos implementará una aplicación web de una sola página para la carga y administración de archivos
1 Instalar paquetes de dependencia
Este proyecto utiliza vue.js, webpack, gulp y elementUI de código abierto Ele.me. Dado que se utiliza es2015, también es necesario introducir babel para convertir el código es6 js a es5.
Los paquetes de dependencia que se deben utilizar son los siguientes
"dependencies": {
"babel-core":"^6.18.2",
"babel-preset-es2015":"^6.18.0",
"config":"^1.24.0",
"element-ui ":"^ 1.0.0",
"es6-promise":"^4.0.5",
"vue":"^2.0.5",
"vue-router"."^2.0.1"
},
"devDependencies": {
"babel-cli": "^6.18. 0",
"babel-loader": "^6.2.7",
"vue-loader": "^9.8.1",
"style-loader":"^0.13.1",
"extract-text-webpack-plugin":"^1.0.1",
"gulp ":"^ 3.9.1",
"webpack":"^1.13.3".
}, además, gulp-cli, webpack y babel-cli son los mejores instalado globalmente, es decir npm install -g webpack, puede usar fácilmente este comando desde la línea de comandos. Además, la velocidad de instalación y descarga de npm también es un tema criticado. Para mejorar la velocidad de instalación de dependencias, puede instalar cnpm o hilo. Actualmente estoy usando mi propio cnpm.
2 archivos de configuración de webpack
Después de instalar las dependencias, puede usar directamente el comando webpack para empaquetar. Utilice el archivo de configuración webpacke.config.js para indicarle a webpack qué reglas necesita. siga para la construcción.
var webpack = require('webpack');
var ruta = require('ruta');
module.exports = {
entrada: "./client/main.js",
resolver: {
extensiones: ['', '.js', '.vue', '. scss', '.css'],
},
salida: {
ruta: ruta.join( __dirname, "./build/assets/ "),
nombre de archivo: '[nombre].[chunkhash:8].js',
fragmento de nombre de archivo: '[id].js',
publicPath: '/assets/',
},
módulo: {
cargadores: [
{ test:/\. vue$/, cargador: 'vue'},
{
prueba：/\.js$/,
excluir：/node_modules|vue\/ dist|vue-router\/|vue-loader\/|vue-hot-reload-API\/,
cargador: 'babel'
}
]
},
complementos: [nombres: ['paquete']
}),
]
};
Descripción:
entrada: punto de entrada, el paquete web construirá el proyecto a partir del archivo js establecido por el punto de entrada. Durante este proceso, el punto de entrada pasa. import o require Se importarán todos los paquetes dependientes. Todos los paquetes de software que dependen del punto de entrada mediante importación o requerimiento se empaquetarán en el archivo y la ruta especificados en la salida;
salida: establece la ruta de salida y el nombre del archivo empaquetado;
Módulo: cargador, que es el analizador de webpack para empaquetado, css, vue, babel y scss. npm instala el cargador correspondiente y webpack analiza y procesa el archivo de formato;
Complementos: todos son complementos empaquetados por webpack y no tienen nada que ver con el lenguaje de análisis al que están acostumbrados. ayudar a la construcción y proporcionar funciones adicionales ricas.
3 Análisis de archivos
En el proceso de análisis de módulos dependientes desde la entrada, webpack admite css, sass y varias fuentes externas. Webpack en sí no tiene la capacidad incorporada para manejar. todos los formatos. Se logra instalando y configurando diferentes cargadores de acuerdo con las necesidades reales del proyecto, simplemente introduzca el cargador correspondiente y webpack podrá analizar y empaquetar diferentes aplicaciones.
Compilar código es6 en es5 también requiere instalar babel-loader; analizar la sintaxis de vue.js (poner plantillas/scripts/estilos en un archivo) también requiere vue-loader.
Al utilizar style-loader, css-loader, sass-loader y sass-loader, webpack tendrá la capacidad de analizar archivos scss.
Como se muestra en el siguiente ejemplo, la sintaxis del cargador se puede escribir de varias maneras:
loaders: [
{ test:/\.vue$/, loader: 'vue'},
{
prueba：/\.css$/,
cargador："estilo! css"
},
{
prueba：/\.css$/,
cargadores：["style", "css", "sass"]
} ,
{
prueba：/\.js$/,
excluir：/node_modules|vue\/dist|vue-router\/|vue - cargador\/|vue-hot-reload-api\/,
cargador: 'babel'
},
{
prueba ./\.(ttf|eot|svg|svg|woff|woff(2))(\?t\=[0-9]+)?$/,
cargador : 'archivo '
}
]4 Reglas de empaquetado personalizadas
Según las necesidades reales del proyecto, combinado con algunos complementos de paquete web, puede lograr funciones potentes sin uso adicional tragar o gruñir.
4.1 Generar huella digital Hash
Para implementar el front-end, tenemos que crear el siguiente código. p>
Para implementar actualizaciones incrementales de recursos estáticos en el front-end, puede usar la propia funcionalidad del paquete web para generar huellas digitales hash para archivos de paquete y luego generar archivos de paquete con huellas digitales hash. El ejemplo es el siguiente:
Salida: {
...
//nombre de archivo: '[nombre].[hash:8].js' ,
Nombre de archivo: '[nombre].[chunkhash:8].js',
//nombre de archivo: '[nombre].[contenthash:8].js',
...
}webpack proporciona tres reglas de generación: hash/chunkhash/contenthash; 8 en [hash:8] es el número hash.
hash: calcula el valor hash según el proceso de compilación correspondiente al recurso en tiempo de compilación
chunkhash: calcula el valor hash según el contenido del módulo
Contenthash: cálculo basado en el valor hash del contenido del archivo
4.2 Empaquetar dependencias js independientes en archivos de proveedores separados
Si el proyecto utiliza jquery, bootstrap, fetch u otros archivos js que no son compatibles requerido, puede optimizar la carga y la implementación de archivos estáticos agrupando estos archivos en archivos de proveedores separados a través del paquete web.
Para lograr esto, el complemento CommonsChunkPlugin se puede empaquetar como un módulo diferente a través de una entrada de configuración, la configuración es la siguiente:
...
paquete: ['. /client/main.js'],
// Las reglas son las mismas que requieren referencia
proveedor : ['whatwg-fetch' ,'jquery']
},
...
complementos: [
nuevo paquete web .optimize.CommonsChunkPlugin({
nombres: ['paquete','proveedor']
}),
]
. ..
4.3 Empaquetar estilos en archivos css separados
También para propósitos de implementación, podemos usar el complemento ExtractTextPlugin para empaquetar estilos referenciados en css separados u otros archivos de estilo de manera similar; generar hashes de huellas dactilares.
...
módulo: {
cargadores: [
...
{
p>
prueba:/\.css$/,
cargador:ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
prueba:/\scss$/,
cargadores:ExtractTextPlugin.extract("style-loader", "css-loader" , "sass-loader ")
}
...
]
},
. ..
complementos:[
new ExtractTextPlugin("[nombre]. [contenthash:8].css", {
allChunks: true
} ),
]
... .4.4 Introducción de archivos empaquetados con huellas dactilares hash en html
Finalmente, necesitaremos una funcionalidad similar a gulp-rev, que introduce automáticamente archivos empaquetados y archivos de proveedores con huellas digitales hash en archivos html. Esto se puede hacer automáticamente a través del paquete web, utilizando el complemento HtmlWebpackPlugin; Si necesita comprimir archivos js, puede utilizar el complemento UglifyJsPlugin, cuya configuración es la siguiente:
plugins:[
...
nuevo HtmlWebpackPlugin({
título: 'Mi aplicación',
plantilla: 'index.html',
nombre de archivo: './index.html'
}) ,
nuevo webpack.optimize.UglifyJsPlugin({
comprimir: {
advertencias: falso
}
}),
]5 Usando webpack con gulp
Además de usar el complemento gulp-webpack, también puedes usar require directamente ('webpack') con trago en trago Utilice el paquete web juntos.
La configuración es relativamente simple
webpack(require(". /webpack.config.js"), function(err, stats) {
if(err) throw new gutil.PluginError (" webpack:build", err);
gutil.log("[webpack. build]", stats.toString({
colores: true
} ));
callback();
}});6 Código fuente
Finalmente, el código fuente de todo el proyecto está en github; otros se agregarán más adelante. Los artículos también se actualizarán junto con el proyecto.
// Utilice gulp para llamar a webpack para empaquetar el código. El código empaquetado se encuentra en el directorio de compilación
npm run build
/// Utilice watch. para actualizar automáticamente La función ejecuta el servidor estático y activa el paquete web para la compilación
// http://localhost:3333
npm run dev
//