2021-03-23

entorno de producción de paquetes web

El entorno de desarrollo del paquete web es más adecuado para la depuración local y el entorno de producción se puede ejecutar en línea.

Extraiga CSS en un archivo separado.
Beneficios: utilice etiquetas de enlace para importar en lugar de etiquetas de estilo, lo que no provocará que la pantalla parpadee. Es
necesario introducir los complementos. Aquí están las instrucciones de descarga

npm i mini-css-extract-plugin -D

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          // 创建style标签，将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
    ,
    new MiniCssExtractPlugin({
    
    
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

El procesamiento de compatibilidad css
ayuda a identificar ciertos entornos y cargar ciertas configuraciones, de modo que la compatibilidad pueda ser precisa para la versión de cada navegador, la siguiente es la instrucción de descarga

npm i postcss-loader postcss-preset-env -D
se configura de la siguiente manera en package.json

"browserslist": {
    
    
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

La configuración básica es la siguiente

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
process.env.NODE_ENV = 'development';

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env

            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

            "browserslist": {
              // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
        
          {
    
    
            loader: 'postcss-loader',
            options: {
    
    
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
    
    
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

Pit
Si se produce el siguiente error, es un problema de falta de coincidencia de la versión

ValidationError: objeto de opciones no válido. PostCSS Loader se ha
inicializado utilizando un objeto de opciones que no coincide con el
esquema de la API .

options tiene una propiedad desconocida 'plugins'. Estas propiedades son válidas: objeto {postcssOptions ?, ejecutar ?, sourceMap ?,
implementación? }

Ahora lo que estoy usando es

[email protected]

[email protected]

Para descargar la versión 3.0.0 de postcss-loader nuevamente:

npm i [email protected] -D

En comparación con loader, los complementos pueden utilizar más css comprimido

npm optimizo-css-assets-webpack-plugin -D

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
    
    
            loader: 'postcss-loader',
            options: {
    
    
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
    
    
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
};

js verificación de sintaxis eslint

[email protected]

[email protected]

[email protected]

[email protected]
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

Configuración en package.json

"EslintConfig": { "amplía": "airbnb-base"}

Si no desea marcar la siguiente línea, puede usar

// 下一行eslint所有规则都失效（下一行不进行eslint检查）
// eslint-disable-next-line（直接卸载js里面，注释了也会执行的）

Configuración relacionada

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      /*
        语法检查： eslint-loader  eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base(包含ES6的东西) eslint-plugin-import eslint
      */
      // {
    
    
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'eslint-loader',
      //   options: {
    
    
      //     // 自动修复eslint的错误
      //     fix: true
      //   }
      // }
                {
    
    
                  test:/\.js$/,
                  exclude:/node_modules/,
                  loader:'eslint-loader',
                  options:{
    
    
                    fix:true
                  }
                }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

manejo de compatibilidad js

Por ejemplo: si usa funciones de flecha, es posible que no haya realizado el procesamiento de compatibilidad. En algunos navegadores, es posible que no se reconozca el
procesamiento de compatibilidad js de sintaxis ES6 : babel-loader @ babel / preset-env @ babel / core

npm i babel-loader @ babel / preset-env @ babel / core -D

(Las siguientes configuraciones se descargan bajo demanda)
Procesamiento de compatibilidad js: babel-loader @ babel / core
1. Procesamiento de compatibilidad js básico -> @ babel / preset-env
Problema: solo se puede convertir la sintaxis básica, como la sintaxis avanzada de promise no ser convertido
2. Todo el procesamiento de compatibilidad js -> @ babel / polyfill (referencia directamente en js, no se requiere configuración)

importar '@ babel / polyfill';

Pregunta: Solo necesito resolver algunos de los problemas de compatibilidad, pero se introducen todos los códigos de compatibilidad, lo cual es demasiado grande ~
3. Solo haga lo que necesita para ser compatible: cargar bajo demanda -> core-js
4. @ babel / preset -env y core-js pueden hacer todo el procesamiento de compatibilidad

// const { resolve } = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    
    resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      /*
        js兼容性处理：babel-loader @babel/core 
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill  
            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
          3. 需要做兼容性处理的就做：按需加载  --> core-js
      */  
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
    
    
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
    
    
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
    
    
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
    
    
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

Comprimir js y compresión CSS
1. El código js se comprimirá automáticamente en el
entorno de producción. Muchos complementos se descargarán en el entorno de producción. Uno de los complementos, UglifyPlugin, comprimirá automáticamente el código.

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

2. Utilice la siguiente declaración para lograr
// comprimir código html
minify: { // eliminar espacios en blanco collapseWhitespace: true, // eliminar comentario removeComments: true }

entorno de producción de paquetes web

Supongo que te gusta