webpack 4学習ノート(一)

前言
これは私が数週間かけてwebpack 4を勉強した学習ノートです.内容が細かくなくて、比較的簡単なので、勝手に持って行きました.文章が皆さんに役に立つことを願っています.間違いがあれば、速やかに指摘してほしい.例はlearn-webpack倉庫にあります.もしあなたがそこから収穫があれば、github点のstarをください.
小さな知識npm info webpack webpackの履歴バージョン情報を表示するなどのnpm init -yはそれらのオプションをスキップし、デフォルトのグローバルインストールのwebpack:webpack index.jsパッケージプロジェクトにインストールされているwebpack: npx webpack index.jsパッケージscriptスクリプトパッケージ:npm run buildコマンドラインパッケージ:npx webpack index.js -o bundle.jsエントリはindex.jsです.出口はbundle.js webpack4設置mode：production圧縮コードdevelopment非圧縮コードパッケージ output内の[name].js loader中のname変数は実はentry:{main: index.js} key => mainです
source-map devtool: source-map source-map:distフォルダにはmap接尾辞ファイルが複数生成されます.このようにページが間違っている場合は、間違った後のアドレスをクリックすると、コードが書かれている場所にジャンプします.パッケージされたコードにジャンプすることはありません.inline-source-map:.mapファイルは新しく生成されません.パッケージされたファイルの下部cheap-inline-source-mapに挿入されます.inline-source-mapが間違っていると、何行目かの文字が表示されます.前にcheapを付けると、いくつかの行cheap-module-inline-source-mapしか教えてくれません.もともとmapはパッケージされたindex.jsとビジネスコードの関係しかマッピングされません.サードパーティがライブラリを導入してエラーを報告してもマッピングできません.真ん中にmoduleというパラメータを入れればいいです.例えばloaderにもsource-mapが開発されている場合は、cheap-module-eval-source-map、evalは独立してmapファイルを生成するのではなく、コードにパッケージ化することをお勧めします.一般development環境用cheap-module-eval-source-map production環境用cheap-module-source-maploader

// style.css
body {
    color: red;
}

プロジェクトにスタイルを追加したい場合、import ./style.cssがcssをインポートし、パッケージコマンドを実行するとき.ページへの併記エラー

ERROR in ./style.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.

このときはloaderを使用してコンパイルする必要があります.インストール:npm i style-loader css-loader -Dなぜstyle-loaderをインストールする必要があるのですか?style-loaderはあなたのスタイルをstyleのラベルでページに挿入するので、webpack.config.jsを構成します.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

HtmlWebpackPluginを使用したのは、index.htmlのページアクセスを自動的に生成するためです.

// package.json
"scripts": {
  "build": "webpack --config webpack.config.js"
},

npm run buildを実行してパッケージ化し、distディレクトリの下のindex.htmlにアクセスすると、ページ表示に成功したことがわかります.loader実行順序は、下から上、右から左です.
webpack-dev-server
webpack-dev-server webpack-dev-serverはあなたのコードをパッケージ化し、パッケージの内容をメモリに入れ、自動的にパッケージ化してdistに入れることはありません.webpack —watchページが更新され、自動的に更新されますwebpack-dev-server現在のページが自動的に更新されますwebpack-dev-server、現在のwebpack-dev-serverは以前よりずっとよくなった.vue-cli3およびreactはこれを使っています

devServer: {
    contentBase: './dist', //       ，
    open: true, //        
  port: 8080, //      
  proxy: {'/api': http://localhost:3000}
}

ホット・アップデートのためのサービスの開始npm install express webpack-dev-middleware -D outputにpublicPathを追加

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleWare = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const complier = webpack(config) //          ，webpack  config          
app.use(webpackDevMiddleware(complier, {
  publicPath: config.output.publicPath, //           ，      
}))
const app = express()
app.listen(3000, () => {
  console.log('server is running 3000')
})

今のように書くのは面倒です(vue-cli 2もそうです).以前のバージョンではwebpack-dev-serverはまだ強くないので、今は違います.とても強くなりました.
Hot Module Replacement
ホットスワップは、ページ全体がリフレッシュされません.ホットアップデートを使用しない場合は、いくつかの機能を操作して3つの要素を追加し、スタイルページを変更して自動的にリフレッシュすると、さっき追加した要素は消えます.熱交換がオンになったら、元のdomはまだあります.

const webpack = require('webpack')
    // ....
  devServer: {
    contentBase: './dist',
      open: true,
      hot: true,
      hotOnly: true //   hot   ，     ，    ，hot        
  },
  // ...
  plugins: [
     new webpack.HotModuleReplacementPlugin()
  ]

import number from './number.js'
if (module.hot) { //        
     //        ，          
  module.hot.accept('./number', () => {
    // dosomething
  })
}

なぜcssファイルを修正したのかmodule.hotを書く必要はありません.jsを書くには書く必要があります.css-loaderは自動的に処理してくれたからです.
babel
基本的な使い方
高バージョンのjsコードを低バージョンのjsコードに変換します.例えばieブラウザはes 6に互換性がなく、babelを使用してes 6コードをjsを低バージョンのjsコードに変換する必要があります.インストール:npm install --save-dev babel-loader @babel/core

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

babel-loaderは、es 6構文を低レベルの構文に変換するのに役立ちません.Webpackとbabelのつながりをつなぐのに役立つだけです.es 5に変換する構文:インストール:npm install @babel/preset-env --save-dev @babel/preset-envは、es 6がes 5に変換するすべてのルールを含む.

module: {
  rules: [
    { 
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        "presets": ["@babel/preset-env"]
      }
    }
  ]
}

さらに低いバージョンに下げる必要がある場合は、babel-polyfillを使用してインストールする必要があります.npm install --save @babel/polyfillページの上部にimport "@babel/polyfill";を導入すると、高度なバージョン構文を低レベル構文に変換できます.しかし、直接importはパッケージされたファイルを非常に大きくします.この時点でwebpack.config.js useBuiltInsを再構成する必要があります

{ 
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
            // "presets": ["@babel/preset-env"]
        //    babel-polyfill         ，             ，       ,
          //    ，            babel   
        "presets": [["@babel/preset-env", {
            useBuiltIns: 'usage'
        }]]
    }
}

サードパーティ製ライブラリを開発する場合は、クラスライブラリ.babel-polyfillを使用すると、グローバルに注入され、グローバル環境に汚染されます.取付:npm install --save-dev @babel/plugin-transform-runtime取付:npm install --save @babel/runtime

{ 
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
      "plugins": ["@babel/plugin-transform-runtime"]
    }
}

構成を追加する場合

{ 
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
      "plugins": [["@babel/plugin-transform-runtime", {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }]]
    }
}

corejsを2インストールに割り当てる場合:npm install --save @babel/runtime-corejs2

{ 
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
      "plugins": [["@babel/plugin-transform-runtime", {
        "absoluteRuntime": false,
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }]]
    }
}

@babel/plugin-transform-runtimeは、グローバル環境を汚染しません.babelの構成が非常に多い場合は、.babelrcファイルに配置し、ルートディレクトリの下で.babelrcファイルを作成し、optionsのコードをこのファイルに配置することができます.以下のようにします.

{
  "plugins": [["@babel/plugin-transform-runtime", {
    "absoluteRuntime": false,
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}

reactにbabelを適用する
インストール:npm install --save-dev @babel/preset-react先ほどの.babelrcファイルに構成を追加

// presets      ，          ，             ，     ，       ，     babel
{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage"
        }],
        "@babel/preset-react"
    ]
}

注意:変換は先から下へ、preset-reactを使用してreactコードを変換し、preset-envでjsコードをes 5コードに変換します.