2021-03-23

その他 2021-03-28 17:04:00 訪問数: null

webpack本番環境

Webpack開発環境はローカルデバッグに適しており、本番環境はオンラインで実行できます

CSSを別のファイルに抽出します。
利点：スタイルタグの代わりにリンクタグを使用してインポートします。これにより、画面のちらつきが発生しません。
プラグインを導入する必要があります。ダウンロード手順は次のとおりです。

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'
};

css互換性処理
は、特定の環境を識別し、特定の構成をロードするのに役立ちます。これにより、互換性は各ブラウザーのバージョンに対して正確になります。ダウンロード手順は次のとおりです。

npm i postcss-loader postcss-preset-env -D
は、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"
    ]
  }

基本構成は以下のとおりです。

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'
};

ピット
以下のエラーが発生した場合は、バージョンミスの問題です

ValidationError：無効なオプションオブジェクト。PostCSSローダーは
、API
スキーマと一致しないオプションオブジェクトを使用して初期化されています。

  • optionsには不明なプロパティ 'plugins'があります。これらのプロパティは有効です：object {postcssOptions？、execute？、sourceMap？、
    implementation？}

今私が使っているのは

postcss-loaderの3.0.0バージョンを再度ダウンロードするには：

npm i [email protected] -D


ローダーと比較して、圧縮されたcssはプラグインによってより多く使用される可能性があります

npm ioptimize-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構文チェックeslint

package.jsonでの構成

“ eslintConfig”：{ “ extends”：“ airbnb-base”}

次の行を確認したくない場合は、

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

関連する構成

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'
};

js互換性処理

例：矢印関数を使用する場合、互換性処理を行っていない可能性があります。一部のブラウザーでは、ES6構文
js互換性処理が認識されない場合があります：babel-loader @ babel / prefix-env @ babel / core

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

（以下の構成はオンデマンドでダウンロードされます）
js互換性処理：babel-loader @ babel / core1
。基本的なjs互換性処理-> @ babel / prefix-env
問題：変換できるのは基本構文のみです。たとえば、promiseの高度な構文は変換できません。変換される
2.すべてのjs互換性処理-> @ babel / polyfill（jsで直接参照、構成は不要）

インポート '@ babel / polyfill';

質問：互換性の問題のいくつかを解決する必要があるだけですが、すべての互換性コードが導入され
ています。これは大きすぎます〜3 。互換性が必要なことを実行します：オンデマンドでロード-> core-js
4. @ babel /プリセット-envとcore-jsはすべての互換性処理を実行できます

// 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'
};

jsとCSSの圧縮を圧縮する
1.jsコードは
本番環境で自動的に圧縮されます。多くのプラグインが本番環境でダウンロードされます。プラグインの1つであるUglifyPluginがコードを自動的に圧縮します。

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.次のステートメントを使用して、
// htmlコードの
縮小を圧縮します。{ //空白を削除しますcollapseWhitespace：true、//コメントを削除しますremoveComments：true }




おすすめ

転載: blog.csdn.net/qq_44073682/article/details/115108841
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com