Bajo el uso de webpack

prefacio

Aquí explicamos el procesamiento: scss, css extract mini-css-extract-plugin, compresión de optimización css css-minimizer-webpack-plugin, compresión de optimización js terser-webpack-plugin, establecer alias de directorio, Devtool, anotación mágica en webpack, Multi -entrada, salida múltiple, variables de entorno, sin andamios vue, cree un proyecto vue usted mismo (esta vez construya vue3)

1. Manejar scss

1. Para instalar, ingrese el siguiente comando

 npm i sass sass-loader -D

2. Configure en webpackconfig.js

3. Función: puede empaquetar archivos scss que el navegador no puede compilar en archivos que el navegador pueda reconocer

2. Extracción de css mini-css-extract-plugin

1. Para instalar, ingrese el siguiente comando

npm install --save-dev mini-css-extract-plugin

2. Configurar en el archivo webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    
    
  plugins: [new MiniCssExtractPlugin()],
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

Función: puede extraer el archivo css por separado y colocarlo en una carpeta para facilitar su administración

Tres, compresión de optimización css css-minimizer-webpack-plugin

1. Para instalar, ejecute el siguiente comando

npm  i  css-minimizer-webpack-plugin -D

2. Configurar en el archivo webpack.config.js

• Esto solo habilitará la optimización de CSS en producción.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    
    
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

• Si también desea habilitar la optimización de CSS en el entorno de desarrollo, establezca la optimización.minimizar en verdadero:

// [...]
module.exports = {
    
    
  optimization: {
    
    
    // [...]
    minimize: true,
  },
};

Función: este complemento utiliza cssnano para optimizar y comprimir CSS. El uso de cadenas de consulta en mapas de origen y activos será más preciso, admitirá el almacenamiento en caché y se ejecutará en modo concurrente.

Cuatro, compresión de optimización js terser-webpack-plugin

1. Para instalar, ejecute el siguiente comando

 npm i terser-webpack-plugin -D

2. Configurar en el archivo webpack.config.js

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    
    
  optimization: {
    
    
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Función: este complemento utiliza terser para comprimir JavaScript.

Cinco, establezca el alias del directorio

1. Configurar en la carpeta webpakc.config.js

module.exports = {
    
    
    resolve: {
    
    
        alias: {
    
    
            '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
        }
    },
};

Seis, Devtool

1. Configurar en el archivo webpack.config.js

devtool:"eval-cheap-source-map"

Función: Función: Existe una correspondencia uno a uno entre los errores y los códigos fuente. Esta opción controla si generar y cómo generar mapas fuente.

Seven, anotaciones mágicas en webpack

Prefetch le dice al navegador que este es un recurso que puede usarse en el futuro.

Los navegadores suelen obtener estos recursos en un estado inactivo y, después de obtenerlos, los colocan en la memoria caché HTTP para facilitar futuras solicitudes.

• 1. Instalación: primero instale jQuery

npm i jquery  -S

• 2. Agregue un comentario mágico al configurar la importación en el archivo webpack.config.js:

 getJQ(){
    
    
        import(/* webpackChunkName:"jquery",webpackPrefetch:true */"jquery")
        .then(({
     
     default:$})=>{
    
    
             
              alert($("body").text())
        })
    }
//  构造函数
   render(){
    
    
       return(<div onClick={
    
    this.getJQ}> 你好react 我喜欢你</div>)
   }

Función: webpackChunkName: "jquery" Nombra el archivo js actual
webpackPrefetch: true La red es libre de precargar js

Ocho, multientrada, multisalida

1. Configurar en el archivo webpack.config.js

	entry:{
    
    
		"index":'./src/index.js', //入口
		"start":'./src/start.js'
	},
	output: {
    
     //出口
		filename: "[name]-[chunkhash].js", //文件名
		path: __dirname + "/dist" //文件夹
	},

	plugins: [
		/* 把template 文件拷贝到dist目录并插入打包的js(main.js) */
		new HtmlWebpackPlugin({
    
    
			template: './public/index.html', //模板
			chunks:["index"],//入口
			filename:'index.html'//文件名
		}),
		new HtmlWebpackPlugin({
    
    
			template: './public/start.html',
			chunks:["start"],
			filename:'start.html'
		}),
      ]

Función: se pueden empaquetar dos o más archivos de entrada al mismo tiempo

Nueve, variables de entorno

Introducción: use el comando de entorno para comprimir el código en el entorno del producto, el entorno de producción no comprime el código, abra devtool

Desarrollo del proyecto:

• Entorno de producto baseURL hhtp://dida100.com:8888
• URL base del entorno de producción http://localhost:8080

cross-env: ejecute scripts que establezcan y usen variables de entorno en todas las plataformas

1. pasar parámetros

1. Ejecute el siguiente comando para instalar el complemento en el proyecto:

npm  i  cross-env -D

2. Configurar en el archivo pack.json

"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",

Configure el siguiente código en webpack.config.js:

devtool:process.env.NODE_ENV==="production"?false:"eval-cheap-source-map",
mode:process.env.NODE_ENV,

Úselo en el archivo js

if(process.env.NODE_ENV=="production"){
    
    
	var baseURL = "http://dida100.com:8080"
}else{
    
    
	var baseURL = "http://localhost:8080"
}
console.log(baseURL)

Diez, construya un proyecto vue usted mismo sin el andamiaje vue (esta vez construya vue3)

1. Ejecute el siguiente comando para instalar el complemento en el proyecto:

npm   i  vue -S

npm i 
vue-hot-reload-api 
vue-loader 
vue-style-loader
vue-template-compiler 
-D

• actualización en caliente de vue-hot-reload-api
• vue-loader maneja archivos .vue
• vue-style-loader maneja estilos
• plantilla de compilación vue-template-compiler

2. Configurar en el archivo webpack.config.js

01 导入
const {
    
     VueLoaderPlugin } = require('vue-loader')
---
02配置
rules: [{
    
     test: /\.vue$/, use: ['vue-loader'] }]
​---
03插件
​ plugins: [new VueLoaderPlugin()]

1. documento vue

• Archivo de plantilla public/start.html

<div id="app"></div>

• src/inicio.js

mport {
    
     createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')//创建App并挂载

• src/App.vue

<template>
	<div>
		<h1>你好vue3</h1>
		<p>{
    
    {
    
    msg}}</p>
		<input type="text" v-model="msg" />
		<button @click="num++">{
    
    {
    
    num}}</button>
	</div>
</template>

<script>
	export default{
    
    
		data(){
    
    
			return{
    
    
				msg:"有饭吃才是王道",
				num:5
			}
		}
	}
</script>

Diez, enlace y guión.

• Espere a que se cargue el contenido de la página antes de cargar js

<script  defer src=""></script>

• precarga css antes de tiempo

<link href="" rel=prefetch>