English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Después de aprender el tutorial de nivel de puerta de entrada de webpack, pienso que es especialmente diseñado para aplicaciones de una página, por ejemplo, webpack+react, webpack+vue, etc., pueden resolver varios problemas de carga y empacado de dependencias de recursos. Incluso css se empaca en js y se agrega dinámicamente al documento DOM.
Entonces, si queremos un sitio web web común de múltiples páginas, css separado, js cargado con módulos?
Dirección del proyecto:webpackDemo_jb51.rar
Inicialización del proyecto, instalación de dependencias
package.json
"devDependencies": {
"css-loader": "^0.23.1",
"extract-texto-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
Estructura de directorio (uso el framework express, otros según las necesidades personales)
- webpackDemo
- src #Directorio de desarrollo de código
- css #Directorio css, organizado en tres niveles: página (módulo), común y tercero
+ page
+ common
+ lib
- js #Scripts de JS, organizados según page y components
+ page
+ components
+ template #Plantilla HTML
- node_modules #Módulos de nodejs utilizados
- public #Archivos estáticos de express
- dist #Directorio de salida de compilación y empacado de webpack, no es necesario crear el directorio, se puede generar automáticamente según la configuración de webpack
+ css
+ js
+ img #Recursos de imágenes
+ view #Archivos estáticos de express (salida de compilación y empacado de webpack en el directorio view)
package.json #Configuración del proyecto
webpack.config.js #Configuración de webpack
Desarrollo de página
En src/js/Crear un archivo index.js en el directorio page, en src/Crear un archivo index.html en el directorio view. El nombre del archivo JS de entrada y el nombre del archivo de plantilla deben coincidir.
El contenido de index.html es el siguiente：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Inicio</title>
<!--
Descripción: No es necesario introducir css ni facicon en el head, webpack realizará la carga necesaria o generará etiquetas style según los requisitos del archivo JS de entrada.
-->
</head>
<body>
<!--
Descripción: No es necesario introducir archivos JS individuales en el body, webpack realizará la carga necesaria o generará etiquetas script según el archivo JS de entrada.
-->
</body>
</html>
Es solo una plantilla HTML simple, sin necesidad de introducir CSS y JS, al paquetizar con webpack se puede cargar automáticamente.
El contenido de index.js es el siguiente：
//Introducir css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');
page1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>page1</title> </head> <body> </body> </html>
page1.js:
//Introducir css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
Configuración de webpack (uso el framework express, otros según las necesidades personales)
var path = require('path');
var webpack = require('webpack');
/*
extract-texto-webpack-plugin,
Con él puede extraer sus estilos a archivos css separados.
La mamá ya no tiene que preocuparse de que los estilos se empaqueten en archivos js.
*/
var ExtractTextPlugin = require('extract-texto-webpack-plugin');
/*
html-webpack-plugin, un plugin esencial en webpack para generar HTML
Puede verlo aquí https://www.npmjs.com/paquete/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //Configurar el archivo de entrada, escriba cuántos hay
index: './src/js/page/index.js',
page1: './src/js/page/page1.js'
},
salida: {
ruta: path.join(__dirname, './public/dist/'), //configuración de directorio de salida, la configuración de rutas para recursos como plantillas, estilos, scripts, imágenes, etc. se refiere a él
publicPath: '"/dist/', //ruta del servidor para recursos como plantillas, estilos, scripts, imágenes, etc.
ruta: 'js/[name].js', //configuración generada para el js principal de cada página
chunkFilename: 'js/[id].chunk.js' //configuración generada por chunk
},
módulo: {
cargadores: [ //Loader, sobre la configuración de parámetros de cada loader, puedes buscarlo por tu cuenta.
{
test: /.css$/,
//Configurar el extractor y el loader de css.'-loader' puede omitirse
loader: ExtractTextPlugin.extract('style-loader', 'css-loader)
test: /.less$/,
//Configurar el extractor y el loader de less. ¡Es necesario explicar el punto medio!
//Llamar sucesivamente loaders de less, css de derecha a izquierda en el orden, la salida del anterior es la entrada del siguiente
//También puedes desarrollar tu propio loader. La forma de escribir loader se puede buscar en Google.
loader: ExtractTextPlugin.extract('css!less')
test: /\.scss$/,
//Configurar el extractor y el loader de scss. ¡Es necesario explicar el punto medio!
//Llamar sucesivamente loaders de scss, css de derecha a izquierda en el orden, la salida del anterior es la entrada del siguiente
//También puedes desarrollar tu propio loader. La forma de escribir loader se puede buscar en Google.
loader: ExtractTextPlugin.extract('css!scss')
//Cargador de plantillas HTML, capaz de procesar recursos estáticos referenciados, configuración de parámetros predeterminada attrs=img:src, procesando recursos de referencias de src de imágenes
//Por ejemplo, si configuras, attrs=img:src img:data-src se puede procesar junto con data-Recursos citados en src, como se muestra a continuación
test: /.html$/,
loader: "html?attrs=img:src img:data-src"
//Cargador de archivos, procesar recursos estáticos
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]
//Cargador de imágenes, similar a file-Cargador de imágenes, similar a file64，reducir las solicitudes http
//La siguiente configuración, convertirá las imágenes inferiores a8192Convertir imágenes de byte a base64Código
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]),
},
plugins: [
new webpack.ProvidePlugin({ //cargar jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // extraer módulos comunes, generar chunk llamado `commons`
chunks: ['index','page1'], //Extraer las partes comunes de qué módulos
minChunks: 2 // Extraer al menos2Partes comunes de varios módulos
}),
new ExtractTextPlugin('css/[name].css'), //usar la etiqueta link para cargar css y configurar la ruta, relativa a la configuración de publickPath en la salida
//HtmlWebpackPlugin, configuraciones relacionadas con la generación de plantillas, cada una para una configuración de página, cuántas escribas, cuántas
new HtmlWebpackPlugin({ //Insertar css según el plantilla/Generar el HTML final con js, css, etc.
favicon: '.',/src/favicon.ico', //ruta del favicon, se introduce a través de webpack y se puede generar un valor de hash
filename: '../../views/index.html', //ruta de almacenamiento del html generado, relativa a path
template: '.',/src/template/index.html', //ruta del archivo de plantilla html
inject: 'body', //ubicación de inserción de js, true/'head'/'body'/false
hash: true, //Generar valores de hash para los recursos estáticos
chunks: ['commons', 'index'],//Los chunks que se necesitan importar, si no se configuran, se importarán todos los recursos de la página.
minify: { //Comprimir el archivo HTML
removeComments: true, //Remover los comentarios del HTML
collapseWhitespace: false //eliminar los espacios en blanco y los saltos de línea
}
}),
new HtmlWebpackPlugin({ //Insertar css según el plantilla/Generar el HTML final con js, css, etc.
favicon: '.',/src/favicon.ico', //ruta del favicon, se introduce a través de webpack y se puede generar un valor de hash
filename: '../../views/page1.html', //ruta de almacenamiento del html generado, relativa a path
template: '.',/src/template/page1.html', //ruta del archivo de plantilla html
inject: true, //ubicación de inserción de js, true/'head'/'body'/false
hash: true, //Generar valores de hash para los recursos estáticos
chunks: ['commons', 'list'],//Los chunks que se necesitan importar, si no se configuran, se importarán todos los recursos de la página.
minify: { //Comprimir el archivo HTML
removeComments: true, //Remover los comentarios del HTML
collapseWhitespace: false //eliminar los espacios en blanco y los saltos de línea
}
}
// new webpack.HotModuleReplacementPlugin(), //Carga caliente
],
//Usar webpack-dev-server, para mejorar la eficiencia del desarrollo
// devServer: {
// contentBase: '.',/',
// host: 'localhost',
// puerto: 9090, //Por defecto8080
// inline: true, //Se puede monitorear el cambio de js
// hot: true, //Reinicio caliente
// }
};
Bueno, después de configurar los siguientes ajustes, ejecuta la orden de empaque de webpack para completar el empaque del proyecto.
Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 bytes 0 [emitted] index
js/page1.js 392 bytes 1 [emitted] página1
js/commons.js 306 kB 2 [emitted] commons
css/index.css 62 bytes 0 [emitted] index
css/page1.css 62 bytes 1 [emitted] página1
css/commons.css 803 bytes 2 [emitted] commons
favicon.ico 1.15 kB [emitted]
../../view/index.html 496 bytes [emitted]
../../view/page1.html 499 bytes [emitted]
[0] ./src/js/page/index.js 170 bytes {0} [built]
[0] ./src/js/page/page1.js 106 bytes {1} [built]
+ 7 módulos ocultos
Child html-webpack-plugin for "../../view/page1.html":
+ 1 módulos ocultos
Child html-webpack-plugin for "../../view/index.html":
+ 1 módulos ocultos
Child extract-texto-webpack-plugin:
+ 2 módulos ocultos
Child extract-texto-webpack-plugin:
+ 2 módulos ocultos
Child extract-texto-webpack-plugin:
+ 2 módulos ocultos
En este momento, vaya al directorio views para ver el archivo index.html generado, como se muestra a continuación:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Inicio</title> <link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head> <body> <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body> </html>
Se puede ver que los archivos generados, además de conservar el contenido del plantilla original, también agregan automáticamente los archivos CSS y JS que deben ser incluidos según la definición del archivo de entrada index.js, así como el favicon, y también agregan el valor de hash correspondiente.
Dos preguntas
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-texto-webpack-plugin,
Con él puede extraer sus estilos a archivos css separados.
La mamá ya no tiene que preocuparse de que los estilos se empaqueten en archivos js.
*/
var ExtractTextPlugin = require('extract-texto-webpack-plugin');
/*
html-webpack-plugin, un plugin esencial en webpack para generar HTML
Puede verlo aquí https://www.npmjs.com/paquete/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*extraer módulos comunes, generar chunk llamado `commons`
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//Compresión
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//Determinar el modo de desarrollo
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //Directorio del archivo
extname = path.extname(entry); //Nombre de la extensión
basename = path.basename(entry, extname); //Nombre del archivo
pathname = path.join(dirname, basename);
63; pathname.replace(new RegExp('^', '')), + pathDir, '') : pathname;
entradas[pathname] = ['./ + entry]; //así se escribe en sistemas osx, win7 entradas[basename]
}
console.log(entradas);
return entradas;
}
//puntos de entrada (obtenidos mediante el método getEntry)
var entradas = getEntry('src/js/page/**/*.js', 'src/js/page/');
//extraer partes comunes de módulos desde entradas para obtener nombres de archivos
var trozos = Object.keys(entradas);
//páginas de plantilla (obtenidas mediante el método getEntry)
var páginas = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(páginas)
var configuración = {
entrada: entradas,
salida: {
ruta: path.join(__dirname, './public/dist/'),//configuración de directorio de salida, la configuración de rutas para recursos como plantillas, estilos, scripts, imágenes, etc. se refiere a él
publicPath: '"/dist/', //ruta del servidor para recursos como plantillas, estilos, scripts, imágenes, etc.
ruta: 'js/[name].js', //configuración generada para el js principal de cada página
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //configuración generada por chunk
},
módulo: {
cargadores: [ //cargador
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
test: /.less$/,
loader: ExtractTextPlugin.extract('css!less')
test: /.html$/,
loader: "html?-minimizar" //evitar la compresión de html,https://github.com/webpack/html-loader/issues/50
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
]),
},
plugins: [
new webpack.ProvidePlugin({ //cargar jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // extraer módulos comunes, generar chunk llamado `commons`
chunks: chunks,
minChunks: chunks.length // extraer todos los módulos dependientes comunes de la entrada
}),
new ExtractTextPlugin('css/[name].css'), //usar la etiqueta link para cargar css y configurar la ruta, relativa a la configuración de publickPath en la salida
debug ? function() {} : new UglifyJsPlugin({ //comprimir código
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //palabras clave a excluir
}),
]),
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/ + pathname + '.html', //ruta de almacenamiento del html generado, relativa a path
template: 'src/template/ + pathname + '.html', //ruta del archivo de plantilla html
inject: false, //ubicación de inserción de js, true/'head'/'body'/false
/*
* En este bloque de compresión, se llamó a html-minify, causará muchos problemas de verificación de sintaxis html durante la compresión,
* Si se utilizan expresiones {{...}} en las propiedades de etiquetas html, por lo que en muchos casos no es necesario configurar el item de compresión aquí,
* Además, UglifyJsPlugin comprimirá el html junto con el código en el proceso de compresión.
* Para evitar la compresión del html, es necesario configurar en html-Configurar 'html?-minimize' en loaders de html-Configuración del loader.
*/
// minify: { //Comprimir el archivo HTML
// removeComments: true, //Remover los comentarios del HTML
// collapseWhitespace: false //eliminar los espacios en blanco y los saltos de línea
// }
};
if (pathname in config.entry) {
favicon: '.',/src/favicon.ico', //ruta del favicon, se introduce a través de webpack y se puede generar un valor de hash
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
El código siguiente es más o menos igual, la diferencia esencial es que se coloca todos los archivos relacionados en un objeto a través de un método, lo que completa el efecto de importación automática!
la configuración anterior es para el sistema operativo mac osx, win7la ruta puede ser diferente
glob: aquí, la interpretación obtenida es diferente:
pero se requiere finalmente
entries:
{
index: ['./src/template/index.js'],
page1: ['./src/template/page1.js']
}
pages:
['index', 'page'1']'
Debe modificarse según la configuración de su computadora personal
Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos nos apoyen en el tutorial de alarido.
Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.