Webpackとの理解

15197 ワード

1024プログラマーデー

webpack
Webpackの基本概念

webpackの役割

vue-cliベース層を実現する原理

は、1つのサーバ

として実行することができる.

は、リアルタイム更新

を行うことができる.

コード修正後、保存すると、ページは自動的に

更新されます.

はcssファイルを解析することができる.vueファイル

準備作業タスク:webpackを使用してvue-vliと同様のプロジェクト構造

を構築する

コンセプトドキュメント転送:リソースをパッケージ化

表

スタイル

スクリプト

ピクチャ

パッケージングプロセス:モジュール化されたプロジェクトで、1つのjsファイルを入口として、それぞれ他のファイル(.js、ピクチャ、スタイル...)をインポートしてモジュール化されたプロジェクトを形成します.Webpackはこのモジュール化されたモジュールをパッケージ化し、js&スタイル&ピクチャをパッケージ化し、パッケージ化した後、ブラウザ上で直接実行することができます.
Webpack使用

1.プロジェクトの初期化(package.jsonファイルの生成)

npm  init -y

2.Webpack

npm install --save-dev [email protected] //    webpack 
npm install --save-dev [email protected] //    webpack   cli

のインストール

3.構成package.json

{
       
	"scripts": {
       
		"start": "webpack ./       "
	}
}

4.パッケージ

npm run start

5.インポートパスの変更

index.htmlにインポートするjsはdistディレクトリのjs

に置き換えられる.

注意点:

サードパーティ製パッケージのダウンロードに失敗しました:ダウンロードしたツールnpmをcnpm

に変更します.

ダウンロードダイレクトエラー:フォルダの名前をwebpack

と名付けないでください.
npm-runの使用npm run start:現在実行中のディレクトリの下にpackage.jsonのscriptのstartコマンドを探して実行します.
プロファイル
手順:

1.0プロジェクトのルートディレクトリにファイル名:webpack.config.js

を作成

2.0プロファイルにコード

const path = require('path');

module.exports = {
       
  entry: './src/main.js',
};

を追加

3.0構成package.jsonファイル

{
       
	"scripts": {
       
		"start": "webpack --config webpack.config.js"
	}
}

4.0削除distディレクトリ

5.0再パッケージ

コンフィギュレーション・アイテム
構成アイテム-エントリ
loader
loader-作用

webpackはデフォルトでjsファイルのみをパッケージ化でき、他のファイル(スタイル、フォント、画像)をパッケージ化できません.他のファイルをパッケージ化する場合は、webpackのloaderを使用してパッケージ化できます.

特徴:

すべてのloaderはサードパーティ製パッケージであり、webpackが他のリソース

をパッケージ化するのに役立ちます.

異なるloaderパッケージのファイルは異なる

です.
loader - style-loader&css-loader
トランスファゲート
手順:

1.0パッケージcssをインストールするloader

npm install --save-dev style-loader css-loader

2.0構成Loader(webpack.sonfig.js)

module.exports = {
       
	entry: '',
	output: {
       },
	module: {
       
		rules: [
			{
        
				test: /\.css$/,
				use: [
					'style-loader', //          
					'css-loader' //        dist    
				]
            }
		]
	}
}

3.0再パッケージnpm run start

loader - less-loader
プロジェクトを書くときはless構文を使ってスタイルを書くのが一般的です.lessサードパーティ製パッケージを使用するパッケージが必要な場合:less-loader
トランスファゲート
lessの使用

styleにlessを作成する.less

lessを追加するスタイル

このless

をsrc/index.jsに導入する
パッケージlessステップ:

1.0サードパーティ製パッケージ

npm install --save-dev less-loader less

を取り付ける.

2.0構成loader(webpack.config.jsで完了)

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

3.0再パッケージ

loader - sass-loader
sassファイルをパッケージ化するための
sassファイルの使用:

はsassファイルを作成します(注意:すべてのsassファイルは他のファイルと衝突することを防止するために、接尾辞名は.scssと統一的に書きます)

sassのコード

を完了

index.jsで

を使用する.
sassをパッケージングするには:

1.0サードパーティ製パッケージ

をダウンロード

2.0サードパーティ製パッケージ

を構成する.

3.0再パッケージ

loader - file-loader
パッケージ画像:

使用画像

htmlにコンテナ

を追加

コンテナにスタイルを設定する:背景画像

を設定する

パッケージ画像:

1.0サードパーティ製パッケージ

をダウンロード

2.0サードパーティ製パッケージ

を構成する.

3.0再パッケージ

注意点:

1.0は、distディレクトリの下にある

に画像をパッケージします.

2.0静的ファイル:public/index.htmlをdistディレクトリにコピー

にインポートされたjsファイルのパスも、対応する修正

を行う.

パッケージフォント:

フォントを使用(bootstrapのフォントファイルを使用)

bootstrap(バージョン番号:3.3.3.7)

をダウンロード

bootstrapをインポートするスタイル

フォントアイコン

を使用

パッケージフォント:

1.0サードパーティ製パッケージ

をダウンロード

2.0サードパーティ製パッケージ

を構成する.

3.0再パッケージ

loader - babel-loader
es 6構文をes 5構文にパッケージ化
パッケージes 6はes 5

1.0サードパーティ製パッケージ

npm install [email protected] @babel/core @babel/preset-env --save-dev

をダウンロード

2.0サードパーティ製パッケージ

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

を構成する.

3.0再パッケージ

注意点:

最新のwebpackはieブラウザを放棄した(es 6をes 5に転送することはないので、上記のコードが機能するには、webpackのバージョンを4.xに降格すべきである)

.
プラグイン
プラグイン-HtmlWebpackPlugin
内容を変更する後、distディレクトリの下の内容を再パッケージした後、indexを必要とする.htmlをpulibcからdistディレクトリにコピーするのは面倒です.
役割:distディレクトリでhtmlファイルを自動的に生成できます.
手順:

1.0ダウンロードプラグイン

npm install --save-dev html-webpack-plugin

2.0構成プラグイン(webpack.config.jsで完了)

//     
const HtmlWebpackPlugin = require('html-webpack-plugin')
//     
module.exports = {
       
    plugins: [
        new HtmlWebpackPlugin({
       
            filename: '', //          
            template: '' //             
        })
    ]
}

3.0再パッケージ:npm run start注意点:

自動生成htmlファイルには、以下の特徴があります.

は、テンプレートの内容を自動的に1部

コピーします.

ファイルの末尾にエントリファイルの参照

<script src="main.js"></script>

が自動的に追加されます.

プラグイン-clean-webpack-plugin
役割:distディレクトリを消去する
手順:

1.0ダウンロードプラグイン

npm install clean-webpack-plugin --save-dev

2.0構成プラグイン

//     
const {
        CleanWebpackPlugin } = require('clean-webpack-plugin');
//     
module.exports = {
       
    plugins： [
 		new CleanWebpackPlugin()
    ]
}

3.0再パッケージ

プラグイン-webpack-dev-server
役割:サーバをオープンし、リアルタイムで更新できる機能
手順:

1.0ダウンロードプラグイン

npm install --save-dev webpack-dev-server

2.0構成プラグイン(webpack.config.js)

module.exports = {
       
	devServer: {
       
    	contentBase: './dist'
	},
}

3.0構成命令:(package.json)

{
       
	"scripts": {
       
		"start": "webpack --config webpack.config.js",
		"serve": "webpack-dev-server --open"
	}
}

4.0オープンサーバ:npm run serve

注意点:

サーバをオープンした後、コードを修正した後、自分で再パッケージする必要がなく、手動でページをリフレッシュする(サーバはリアルタイムで更新できる)

webpack-dev-serverプラグインの使用時にデフォルトで使用するデフォルトファイルの名前は、webpack.config.js

です.

よく使われるいくつかのソートアルゴリズムC++実装(バブルソート、挿入ソート、選択ソート)

sortとpriority_Queueの比較標準差異