Node.js webpack

npm i webpack -g
jsを編集するときにnodeを使用し、webpackを使用してbundle.jsにパッケージしてhtmlにインポートするメリットは

jsファイルの相互依存関係を処理する

js互換性の問題を処理し、node.jsの文法をブラウザが解析できるコードwebpack main.js bundle.js

に翻訳する.webpack.config.js webpackを構成する

const path = require('path')
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output: {
		path.join(__dirname, './dist',
		filename: 'bundle.js'
	}
}

Webpack-dev-serverはWebpackに依存し、本プロジェクトにnpm i webpack npm i webpack-dev-serverをインストールする必要があります.
Webpack-dev-serverパッケージのbundle.jsは物理ディスクに置かず、メモリに置かれているので、ルートディレクトリにはbundle.jsが見つかりません.ルートディレクトリには/bundle.jsがあります.
Webpack-dev-serverの構成

取付npm i webpack

取付npm i webpack-dev-server

取付npm i html-webpack-plugin js

を手動で導入する必要はない.

構成webpack.config.js webpack

を構成する

const path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output: {
        path: path.join(__dirname, './dist'),
		filename: 'bundle.js'
	},
	plugins:[ //   plugins      
		new htmlWebpackPlugin({
			template:path.resolve(__dirname, 'src/index.html'),//    
			filename:'index.html'//     HTML     
		})
	]
}

scrpitsにおけるショートカットdev

の構成

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.34.0",
    "webpack-dev-server": "^3.7.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.4"
  }
}

パラメータ
説明
open
ブラウザを自動的に開く
port
リスニングポート
contentBase src
srcフォルダのindexを自動的に開きます.デフォルトはルートディレクトリで、srcではありません.
hot
非同期、手動でリフレッシュしない

運転npm run dev

cssの処理
1.npm i style-loader css-loaderをインストールする2.サードパーティファイルの照合規則を構成し、moduleノードを新規作成する

module: { //        loader   
      rules: [ //        
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }//  css     
      ]
  }

Webpackを使用してcssのパスを処理する

運転cnpm i url-loader file-loader

urlパスを処理するloaderモジュールをwebpack.config.jsに追加する:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

は、base 64符号化を行うピクチャサイズをlimitによって指定することができる.base 64符号化は、指定バイト未満のピクチャのみが行う:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

フォントファイルの処理
取付npm i bootstrap

import `bootstrap/dist/css/bootstrap.css`

{test: /\.(ttf|eot|svg|woff|woff2)$/,use: 'url-loader'}

babel
es 6の新しい語の法則を使うならbabelで文法の降格のパッケージを行う必要があります

運転cnpm i babel-core babel-loader babel-plugin-transform-runtime

運転cnpm i babel-preset-env babel-preset-stage-0

webpack.config.jsに関連するloaderモジュールを追加し、node_を除外modules、他の人が書いたバッグをコンパイルしないでください

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

プロジェクトルートディレクトリに.babelrcファイルを追加し、このプロファイルを以下のように変更します.

{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}