Sob o uso de webpack

prefácio

Aqui explicamos o processamento: scss, css extract mini-css-extract-plugin, compactação de otimização css css-minimizer-webpack-plugin, compactação de otimização js terser-webpack-plugin, definir alias do diretório, Devtool, anotação mágica no webpack, Multi -entrada, multi-saída, variáveis ​​de ambiente, sem scaffolding vue, construa um projeto vue sozinho (desta vez construa vue3)

1. Lidar com scss

1. Para instalar, digite o seguinte comando

 npm i sass sass-loader -D

2. Configure em webpackconfig.js

3. Função: Você pode compactar arquivos scss que não podem ser compilados pelo navegador em arquivos que o navegador pode reconhecer

2. mini-plugin-extrair-css para extração de css

1. Para instalar, digite o seguinte comando

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

2. Configure no arquivo 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"],
      },
    ],
  },
};

Função: Você pode extrair o arquivo css separadamente e colocá-lo em uma pasta para facilitar o gerenciamento

Três, compactação de otimização de css css-minimizer-webpack-plugin

1. Para instalar, execute o seguinte comando

npm  i  css-minimizer-webpack-plugin -D

2. Configure no arquivo webpack.config.js

• Isso permitirá apenas a otimização de CSS na produção.

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()],
};

• Se você também deseja ativar a otimização de CSS no ambiente de desenvolvimento, defina optimization.minimize como true:

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

Função: Este plug-in usa cssnano para otimizar e compactar CSS. O uso de strings de consulta em mapas e ativos de origem será mais preciso, oferecerá suporte ao cache e será executado no modo simultâneo.

Quatro, compactação de otimização js terser-webpack-plugin

1. Para instalar, execute o seguinte comando

 npm i terser-webpack-plugin -D

2. Configure no arquivo webpack.config.js

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

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

Função: Este plugin usa terser para compactar JavaScript.

Cinco, defina o alias do diretório

1. Configure na pasta webpakc.config.js

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

Seis, Devtool

1. Configure no arquivo webpack.config.js

devtool:"eval-cheap-source-map"

Função: Função: Há uma correspondência de um para um entre os erros e os códigos-fonte. Esta opção controla se os mapas de origem devem ser gerados e como gerados

Sete, anotações mágicas no webpack

Prefetch informa ao navegador que este é um recurso que pode ser usado no futuro.

Os navegadores geralmente obtêm esses recursos em um estado ocioso e, após obtê-los, os colocam no cache HTTP para facilitar solicitações futuras.

• 1. Instalação: primeiro instale o jQuery

npm i jquery  -S

• 2. Adicione um comentário mágico ao configurar a importação no arquivo webpack.config.js:

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

Função: webpackChunkName: "jquery" Nomeie o arquivo js atual
webpackPrefetch: true A rede está livre para pré-carregar js

Oito, entrada múltipla, saída múltipla

1. Configure no arquivo 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'
		}),
      ]

Função: Dois ou mais arquivos de entrada podem ser empacotados ao mesmo tempo

Nove, variáveis ​​de ambiente

Introdução: Use o comando de ambiente para compactar o código no ambiente do produto, o ambiente de produção não compacta o código, abra o devtool

Desenvolvimento de projeto:

• URL base do ambiente do produto hhtp://dida100.com:8888
• URL base do ambiente de produção http://localhost:8080

cross-env: execute scripts que definem e usam variáveis ​​de ambiente entre plataformas

1. passar parâmetros

1. Execute o seguinte comando para instalar o plug-in no projeto:

npm  i  cross-env -D

2. Configure no arquivo pack.json

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

Configure o seguinte código em webpack.config.js:

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

Use-o no arquivo js

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

Dez, construa um projeto vue sozinho sem scaffolding vue (desta vez construa vue3)

1. Execute o seguinte comando para instalar o plug-in no projeto:

npm   i  vue -S

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

• vue-hot-reload-api hot update
• vue-loader lida com arquivos .vue
• vue-style-loader lida com estilos
• modelo de compilação vue-template-compiler

2. Configure no arquivo webpack.config.js

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

1. documento de visualização

• Arquivo de modelo public/start.html

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

• src/start.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>

Dez, link e script

• Aguarde o carregamento do conteúdo da página antes de carregar js

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

• pré-carregar css antes do tempo

<link href="" rel=prefetch>