Use Webpack para empaquetar, configurar y cargar componentes VUE

webpack4 asegúrese de usar la versión Node> = 8.9.4

Webpck es una herramienta de carga / embalaje de recursos front-end. Realiza un análisis estático basado en las dependencias del módulo y luego genera los recursos estáticos correspondientes de acuerdo con las reglas especificadas para estos módulos.
Sitio web oficial: https://webpack.js.org/

El uso de webpack4 ya no requiere webpack.congig.js como el archivo de configuración de entrada del paquete.
La entrada predeterminada es el índice de './src' y la salida predeterminada de './dist', se pueden aplicar proyectos pequeños, no se recomiendan proyectos grandes.

PD: al instalar el paquete que estoy usando es cnpmno npm, porque el espejo Taobao, para ver si los estudiantes no tienen este artículo puede ser retirado de la c.

1-10 es la configuración básica de webpack. 11-12 es la configuración y empaque de componentes vue

1. Crear proyecto -
2. Instalar y configurar webpack -
3. Modificar entrada y salida empaquetadas -
4. Configure la función de empaquetado automático -
5. Configure html-webpack-plugin para generar una página de vista previa -
6. Configure los parámetros relevantes para el empaquetado automático -
7. El cargador de Webpack se usa básicamente:
8. Configure postCSS para agregar automáticamente prefijos compatibles con CSS -
9. Empaque las imágenes y los archivos de fuentes en la hoja de estilo.
10. (babel) Empaquete y procese la sintaxis avanzada en el archivo js -
11. Configurar el cargador de componentes vue -
12. embalaje de paquete web

> 1. Uso básico de webpack

1. Crear un directorio de proyecto en blanco, y ejecutar el npm init -ycomando, paquetes de inicialización de gestión de archivos de configuración package.json
2. Nuevo directorio de código fuente src
3. Nueva página de inicio src-> index.html
4. Inicializar la estructura básica de la página de inicio.
5. Ejecutar npm install jquery -scomandos para instalar jQuery
6. A través de la forma modular, realice la función
   
   de entrelazar el color de la lista La imagen de arriba es el contenido de index.html La
   
   imagen de arriba es el contenido de index.js.
   La ejecución de index.html informará un error. En este momento, se necesita webpack para resolver el problema de compatibilidad.
   Comienza el segundo paso ...

> 2. Instalar y configurar webpack en el proyecto

1. Ejecutar cnpm i webpack webpack-cli -Dcomandos
2. En el directorio raíz del proyecto, crear el nombre webpack.config.jsdel fichero de configuración webpack
3. En el archivo de configuración del paquete web, inicialice la siguiente configuración básica

   module.exports={
   	mode:'development' // mode用来指定构建模式 开发阶段可用 development 模式
   	// development转换出来的代码不会被压缩 转换速度较快，production 模式与之相反
   	// production用于上线阶段
   }

4. En el nodo de scripts del archivo de configuración package.json, agregue el script de desarrollo de la siguiente manera

"scripts":{
   	"dev":"webpack" // script 节点下的脚步 可以通过 npm run执行
   }

5. Ejecutar en un terminal npm run devde comandos para iniciar paquete de proyectos webpack.
   
   En este momento, ejecute index.html en el navegador sin error.

> 3. Configure la entrada y salida empaquetadas

Convención predeterminada de la versión Webapck 4.x: el
archivo de entrada del paquete es src - index.jx
el archivo de salida del paquete es dist - main.js

Si desea modificar la entrada y la salida, webpack.config.jsagregue la siguiente configuración en

const path = require('path') // 导入node中专门操作路径的模块
module.exports = {
	entry:path.join(__dirname, './scr/index.js'), //打包入口文件路径
	output:{
		path:path.join(__dirname, './dist'), // 输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

Configuración de la siguiente manera:

vuelva a ejecutar npm run devempaquetado
en el directorio será más de un bundle.js dist, introducción de JS modificados archivo index.html, vuelva a ejecutar, igualmente eficaces.

> Cuatro: configurar la función de empaquetado automático

El embalaje automático es para evitar los engorrosos pasos de reempaque cada vez que modifica

1. Ejecutar cnpm install webpack-dev-server -Dcomandos para instalar la herramienta de envasado automático para proyectos de apoyo
2. Modifique el comando dev en package.json-> scripts

"scripts":{
	"dev":"webpack-dev-server" 
}

3. Modifique la ruta de referencia de la secuencia de comandos en src-> index.html a "bundle.js"
   Aquí se puede entender que hay un bundle.js oculto en el directorio raíz del proyecto
4. Ejecutar npm run devre-envasados
5. En el navegador para acceder a la http://localhost:8080dirección, ver el efecto de envasado automático
   

En este momento, si modifica el código en la página y lo guarda, se compilará automáticamente y podrá ver el efecto sin actualizar la página.

webpack-dev-server iniciará un
archivo http empaquetado en tiempo real del servidor webpack-dev-server (aquí está bundle.js), que se coloca en el directorio raíz del proyecto de forma predeterminada y es prácticamente invisible

> 5. Configure html-webpack-plugin para generar una página de vista previa

Abrir http://localhost:8080para ver es el directorio de proyecto
aquí si quieres ver directamente a través de la página principal que necesita para html-webpack-pluginconfigurar

1. Ejecutar cnpm install html-webpack-plugin -Dcomandos para instalar la página de vista previa generada enchufable
2. Modificación de webpack.config.jsla zona de cabecera del archivo añadido de la siguiente

// 导入生产预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
	template:'./src/index/html', // 指定要用到的模版文件
	filename:'index.html' // 指定生产文件的名称 该名称存在于内存中 目录中不显示
})

3. Modificar webpack.congig.jsel archivo de configuración nuevo externas expuestas objeto de configuración

module.exports = {
	plugins = [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}

Luego npm run devde actualización http://localhost:8080será capaz de ver directamente la página principal

> 6. Configure los parámetros relevantes del empaquetado automático

Cuando se completa el paquete, debe ingresar manualmente la dirección en el navegador para ver la página.
Si desea abrir automáticamente el navegador para ingresar a la página de inicio, puede consultar la siguiente configuración

// package.json 中的配置
// --open 打包完成自动打开浏览器页面
// --host 配置IP地址
// --port 配置端口
"scripts":{
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

A continuación, ejecute npm run devse abrirá automáticamente la página principal y el número de la dirección y el puerto es el valor que se configura

> 7. Uso básico del cargador de webpack

De forma predeterminada, webpack solo puede empaquetar módulos que terminan con el sufijo .js. Otros archivos que no terminan con js deben llamar al cargador para que estén correctamente empaquetados, de lo contrario se informará un error.
loaderEl cargador puede ayudar a webpack a empaquetar y procesar módulos de archivos específicos como:

1. Procesamiento de paquetes con menos cargador. Menos archivos relacionados
2. sass-loader paquetes y procesa archivos relacionados con .scss
3. paquetes de url-loader y procesa archivos relacionados con la ruta URL en CSS

No es necesario configurarlos todos en combinación con el proyecto real aquí.

【Una configuración de cargador css】

1. Ejecutar cnpm i style-loader css-loader -Dcomandos
2. Agregue la regla del cargador en el módulo-> matriz de reglas de webpack.config.js de la siguiente manera:

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

【Dos configuraciones de cargador menos】

1. Ejecute cnpm i less-loader less -D
2. Agregue la regla del cargador en el módulo-> matriz de reglas de webpack.config.js de la siguiente manera:

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader', 'less-loader']}
	]
}

【Configuración de tres scss loader】

1. Ejecute cnpm i sass-loader node-sass -D
2. Agregue la regla del cargador en el módulo-> matriz de reglas de webpack.config.js de la siguiente manera:

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader', 'sass-loader']}
	]
}

Probar si la configuración
que he creado una nueva carpeta css en el directorio src
en el archivo css nuevo tres archivos base.css, base1.less, base2.scss
y escribí estilos cada archivo de estilo, y luego index.js Los archivos se importan a estos tres archivos
npm run dev. No hay ningún error en la operación del paquete y los estilos son efectivos.

> 8. Configure postCSS para agregar automáticamente el prefijo compatible con css

Se ocupa principalmente de la compatibilidad del navegador.

1. Ejecutar cnpm i postcss-loader autoprefixer -Dcomandos
2. Postcss creado en los perfiles directorio raíz del proyecto postcss.config.jsy la configuración inicial

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的文件
module.exports = {
	plugins:[autoprefixer] // 挂载创建
}

3. En webpack.config.jsel módulo-> matriz de reglas, agregue la regla del cargador de la siguiente manera

module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader', 'postcss-loader']}
	]
}

> Nueve archivos de imagen y fuente en la hoja de estilo del paquete

Cuando hay imágenes y recursos de fuentes en el proyecto, se debe manejar alguna configuración.
Aquí puede crear una nueva carpeta de imágenes en el directorio src y luego importar las imágenes para probar.

1. Ejecutar cnpm i url-loader file-loader -Dcomandos
2. En webpack.config.jsel módulo-> Reglas de matriz, reglas complemento del cargador

module:{
	rules:[
		{
			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
			use: 'url-loader?limit=70000'
		}
	]
}
// ?之后的事loader的参数项
// limit用来指定图片的大小 单位是字节byte 只有小于limit大小的图片 才会被转为base64
// base64的图片加载比较快

> Diez. (Babel) Empaque y procese sintaxis avanzada en archivos js

1. Instalar paquetes relacionados con babel converter cnpm i babel-loader @babel/core @babel/runtime -D
2. Instalar paquetes relacionados con el complemento de sintaxis de babel cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3. Crear un archivo de configuración de Babel en el directorio raíz del proyecto babel.config.jse inicializar la configuración básica

module.exports = {
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

4. webpack.config.jsAgregue la regla del cargador en el módulo-> matriz de reglas de la siguiente manera

// exclude 为排除项 表示babel-loader不需要处理mode-modules中的js文件

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

Durante la configuración anterior, escribí un método en index.js e informé un error al ejecutarlo.
Ejecútelo después de la configuración, y puede generar los resultados.

> 11. Webpack configura el cargador VUE

Primero, cree una nueva carpeta de componentes en src, luego cree un nuevo App.vue en ella
y luego introduzca App.vue en index.js. Se produce un error.
Aquí, el cargador web se usa para configurar el cargador.

1. Corriendo cnpm i vue-loader vue-template-compiler -D
2. webpack.config.jsAgregue la configuración de vue-loader en el archivo de configuración

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module:{
		rules:[
		   // 其他规则
		   {test:/\.vue$/, use:'vue-loader'}
		]
	},
	plugins:[
		// 其他插件
		new VueLoaderPlugin() //确保引入这个插件
	]
}

> 12. Embalaje webpack

webpack archivo de configuración en el envasado package.json manda
el comando para cargar el directorio raíz del proyecto por defecto webpack.config.jsel perfil

"scripts":{
	// 用于打包的命令
	"build": "webpack -p",
}

npm run build Se generará un archivo dist, que puede distribuirse al servidor o publicarse en Internet