Webpackを使用してVUEコンポーネントをパッケージ化、構成、ロードする

webpack4は必ずNode version> = 8.9.4を使用してください

Webpckは、フロントエンドのリソースロード/パッキングツールです。モジュールの依存関係に基づいて静的分析を実行し、これらのモジュールに指定されたルールに従って対応する静的リソースを生成します。
公式サイト：https : //webpack.js.org/

webpack4を使用しても、パッケージエントリ構成ファイルとしてwebpack.congig.jsは必要ありません。
デフォルトのエントリは「./src」のインデックスと「./dist」のデフォルトの出口です。小さなプロジェクトを適用できますが、大きなプロジェクトはお勧めしません。

PS：私は使用していたパッケージをインストールする際には、あるcnpmではないnpm学生は、この記事では、Cから削除することができていないかどうかを確認するために、ために淘宝網のミラー。

1-10はwebpackの基本構成です。11-12は、vueコンポーネントの構成とパッケージ化です。

プロジェクトを作成–
Webpackのインストールと構成–
パッケージ化された入口と出口を変更する–
自動パッケージ機能を構成する–
html-webpack-pluginを設定してプレビューページを生成します–
自動パッケージングに関連するパラメーターを構成します–
Webpackのローダーは基本的に使用されます–
css互換のプレフィックスを自動的に追加するようにpostCSSを構成します–
画像とフォントファイルをスタイルシートにパックします。
（babel）jsファイルに高度な構文をパックして処理する–
vueコンポーネントローダーの構成–
ウェブパックのパッケージ–

> 1. webpackの基本的な使い方

空白のプロジェクトディレクトリを作成し、実行するnpm init -yコマンドを、パケットの管理設定ファイルpackage.json初期化
新しいsrcソースコードディレクトリ
新しいsrc-> index.htmlホームページ
ホームページの基本構造を初期化する
実行npm install jquery -sjqueryのをインストールするコマンド
モジュール形式で、リストの色をインターレースする機能

を実現します。上の画像はindex.htmlの内容です

。
index.htmlを実行するとエラーが報告されます。現時点では、互換性の問題を解決するためにwebpackが必要です。
2番目のステップを開始します...

> 2.プロジェクトにwebpackをインストールして構成する

ファイル名を指定して実行cnpm i webpack webpack-cli -Dコマンド
プロジェクトのルートディレクトリでは、名前の作成webpack.config.jsコンフィギュレーションファイルのをWebPACKの
webpack構成ファイルで、次の基本構成を初期化します

   module.exports={
   	mode:'development' // mode用来指定构建模式 开发阶段可用 development 模式
   	// development转换出来的代码不会被压缩 转换速度较快，production 模式与之相反
   	// production用于上线阶段
   }

ここに画像の説明を挿入

package.json構成ファイルのスクリプトノードの下に、次のように開発スクリプトを追加します。

"scripts":{
   	"dev":"webpack" // script 节点下的脚步 可以通过 npm run执行
   }

ここに画像の説明を挿入

ターミナルで実行npm run devWebPACKのプロジェクトパッケージを起動するコマンド。

この時点で、ブラウザでindex.htmlをエラーなしで実行します。

> 3.パッケージ化された入口と出口を構成する

Webapck 4.xバージョンのデフォルト規則：
パッケージエントリファイルはsrc – index.jx
パッケージ出力ファイルはdist – main.jsです

入口と出口を変更する場合はwebpack.config.js、次の構成を追加します

const path = require('path') // 导入node中专门操作路径的模块
module.exports = {
	entry:path.join(__dirname, './scr/index.js'), //打包入口文件路径
	output:{
		path:path.join(__dirname, './dist'), // 输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

設定は次のとおりです。
ここに画像の説明を挿入
再実行しnpm run dev、パッケージ
のディレクトリには、同様に効果的な、よりdistのbundle.js、修正JSのindex.htmlファイルの導入、再放送のだろう。

> 4。自動パッケージングの機能を構成する

自動梱包は、変更するたびに再梱包するという面倒な手順を回避するためのものです

実行cnpm install webpack-dev-server -D支援事業への自動包装ツールをインストールするコマンド
package.json->スクリプトのdevコマンドを変更します

"scripts":{
	"dev":"webpack-dev-server" 
}

src-> index.htmlのスクリプトスクリプト参照パスを「bundle.js」に変更します。
ここでは、プロジェクトのルートディレクトリに非表示のbundle.jsがあることがわかります。
ファイル名を指定して実行npm run devを再パッケージ化
アクセスするには、ブラウザでhttp://localhost:8080アドレスを、自動包装効果を表示

このとき、ページ内のコードを変更して保存すると、コードは自動的にコンパイルされ、ページを更新せずに結果を確認できます。

webpack-dev-serverは、リアルタイムでパッケージ化されたhttpサーバー
webpack-dev-serverパッケージ化された出力ファイル（ここではbundle.js）を起動します。これはデフォルトでプロジェクトのルートディレクトリに配置され、実質的に非表示です。

> 5. html-webpack-pluginを設定してプレビューページを生成する

オープンhttp://localhost:8080を見ては、プロジェクトディレクトリをである
あなたがする必要がホームページから直接確認したい場合は、ここでhtml-webpack-pluginの設定

実行cnpm install html-webpack-plugin -Dプラグイン生成されたプレビューページをインストールするコマンド
変更webpack.config.js次のようにファイルのヘッダ領域を追加します

// 导入生产预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
	template:'./src/index/html', // 指定要用到的模版文件
	filename:'index.html' // 指定生产文件的名称 该名称存在于内存中 目录中不显示
})

変更しwebpack.congig.js、次の新しい設定ファイルを外部に露出設定オブジェクト

module.exports = {
	plugins = [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}

ここに画像の説明を挿入

そして、npm run devリフレッシュhttp://localhost:8080直接メインページを見ることができます

> 6.自動パッケージングの関連パラメーターを構成する

パッケージ化が完了したら、ブラウザでアドレスを手動で入力してページを表示する必要があります。
ブラウザを自動的に開いてホームページを表示する場合は、次の構成を参照してください

// package.json 中的配置
// --open 打包完成自动打开浏览器页面
// --host 配置IP地址
// --port 配置端口
"scripts":{
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

次に実行するnpm run devと、自動的にメインページとアドレスとポート番号を開きますことは、あなたが設定した値であります

> 7。webpackのローダーの基本的な使用法

デフォルトでは、webpackは.jsサフィックスで終わるモジュールのみをパッケージ化できます。jsで終わらない他のファイルは、ローダーを呼び出して適切にパッケージ化する必要があります。そうしないと、エラーが報告されます。
loaderローダーは、次のような特定のファイルモジュールをパッケージ化して処理するWebpackを支援できます。

ローダーが少ないパッケージ処理、関連ファイルが少ない
sass-loaderパッケージおよびプロセス.scss関連ファイル
url-loaderは、CSSのURLパスに関連するファイルをパッケージ化して処理します

ここで実際のプロジェクトと組み合わせてすべてを構成する必要はありません。

【1つのCSSローダー構成】

ファイル名を指定して実行cnpm i style-loader css-loader -Dコマンド
次のように、webpack.config.jsのmodule-> rules配列にローダールールを追加します。

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
}

【ローダー2個構成】

cnpm i less-loader less -Dを実行します
次のように、webpack.config.jsのmodule-> rules配列にローダールールを追加します。

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader', 'less-loader']}
	]
}

【3つのscssローダー構成】

cnpm i sass-loader node-sass -Dを実行します
次のように、webpack.config.jsのmodule-> rules配列にローダールールを追加します。

// 所有第三方文件模块的批判规则
module:{
	rules:[
		{test:/\.scss$/,use:['style-loader','css-loader', 'sass-loader']}
	]
}

ここに画像の説明を挿入
構成が成功したかどうかをテストします。src
ディレクトリに新しいcssフォルダーを作成しました
。cssファイルbase.css、base1.less、base2.scssに3つの新しいファイルを作成し
、各スタイルファイルにスタイルを書き込んでから、index.jsに書きました。これらの3つのファイルにファイルがインポートされます
npm run dev。パッケージの操作にエラーはなく、スタイルはすべて有効です。
ここに画像の説明を挿入

> 8。CSS互換のプレフィックスを自動的に追加するようにpostCSSを設定します

主にブラウザの互換性を扱います。

ファイル名を指定して実行cnpm i postcss-loader autoprefixer -Dコマンド
Postcssは、プロジェクトのルートディレクトリプロファイルで作成されpostcss.config.js、初期設定

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的文件
module.exports = {
	plugins:[autoprefixer] // 挂载创建
}

ここに画像の説明を挿入

ではwebpack.config.jsモジュール- >規則配列、次のルールローダーを追加

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

> 9.パッケージスタイルシートの画像とフォントファイル

プロジェクトに画像とフォントリソースがある場合、いくつかの構成を処理する必要があります。
ここで、srcディレクトリに新しい画像フォルダーを作成し、テストする画像をインポートできます。

ファイル名を指定して実行cnpm i url-loader file-loader -Dコマンド
ではwebpack.config.jsモジュール- >が配列規則、ローダルールを追加

module:{
	rules:[
		{
			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
			use: 'url-loader?limit=70000'
		}
	]
}
// ?之后的事loader的参数项
// limit用来指定图片的大小 单位是字节byte 只有小于limit大小的图片 才会被转为base64
// base64的图片加载比较快

ここに画像の説明を挿入

> 10（Babel）jsファイルの高度な構文をパックして処理する

Babelコンバーター関連パッケージをインストールする cnpm i babel-loader @babel/core @babel/runtime -D
babel構文プラグインに関連するパッケージをインストールする cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
プロジェクトのルートディレクトリにバベルの設定ファイルを作成babel.config.jsし、基本的な構成を初期化

module.exports = {
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

webpack.config.js次のようにモジュール->ルール配列にローダールールを追加します

// exclude 为排除项 表示babel-loader不需要处理mode-modules中的js文件

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

上記の構成中に、index.jsにメソッドを記述し、実行中にエラーを報告しました。
構成後に実行すると、結果を出力できます。
ここに画像の説明を挿入

> 11. WebpackがVUEローダーを構成する

まず、srcの下に新しいコンポーネントフォルダーを作成し、その中に新しいApp.vueを作成してから、
index.jsにApp.vueを導入します。エラーが発生します。
ここでは、Webローダーを使用してローダーを構成しています。

実行中 cnpm i vue-loader vue-template-compiler -D
webpack.config.jsvue-loader の構成を構成ファイルに追加します

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module:{
		rules:[
		   // 其他规则
		   {test:/\.vue$/, use:'vue-loader'}
		]
	},
	plugins:[
		// 其他插件
		new VueLoaderPlugin() //确保引入这个插件
	]
}

> 12. Webpackパッケージ

package.jsonパッケージ内のWebPACK設定ファイルは、コマンド
デフォルトのプロジェクトルートディレクトリにロードするためのコマンドwebpack.config.jsプロファイルを

"scripts":{
	// 用于打包的命令
	"build": "webpack -p",
}

npm run build distファイルが生成され、サーバーに配布したり、インターネットなどで公開したりできます。

12 -

41件のオリジナル記事を公開しました・ Likes2 ・ 1836を訪問します

プライベートの手紙の懸念

Webpackを使用してVUEコンポーネントをパッケージ化、構成、ロードする

> 1. webpackの基本的な使い方

> 2.プロジェクトにwebpackをインストールして構成する

> 3.パッケージ化された入口と出口を構成する

> 4。自動パッケージングの機能を構成する

> 5. html-webpack-pluginを設定してプレビューページを生成する

> 6.自動パッケージングの関連パラメーターを構成する

> 7。webpackのローダーの基本的な使用法

> 8。CSS互換のプレフィックスを自動的に追加するようにpostCSSを設定します

> 9.パッケージスタイルシートの画像とフォントファイル

> 10（Babel）jsファイルの高度な構文をパックして処理する

> 11. WebpackがVUEローダーを構成する

> 12. Webpackパッケージ

おすすめ