webpackでvueプロジェクトをビルドする方法
この記事では主に webpack を使用して vue プロジェクトをビルドする手順を紹介します。
準備
webpack
vue.js
npm
nodejs
ES6構文
この記事の内容はnpm経由でvueをロードすることなので、インストールが完了したら、次の手順を実行します:
プロジェクトを作成する
mkdir vue-demo cd vue-demo
npm initコマンドを使用してpackage.jsonファイルを生成します
npm init
大まかに生成されたpackage.jsonは次のとおりです:
{
"name": "vue-demo",
"version": "1.0.0",
"description": "this is a vue demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
}
}webpackの使い方を教えてください。公式サイトを参照してください
npm install webpack --save-dev
npmを使用したダウンロード速度が遅すぎる場合は、タオバオのcnpmミラーを使用できます
npm install -g cnpm –registry=https://registry.npm.taobao.org
npmをポイントするには、上記のコマンドを入力してください。国内ミラーを使用する場合、npm を cnpm に置き換える必要があります。その他は変更されません
プロジェクト内に webpack.config.js ファイルを作成します
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
}
}webpack コマンドを使用してコンパイルします
webpack
プロジェクトのディレクトリは次のとおりです。
注: webpack コマンドを使用する前に、index.html を作成する必要があります。 main.js ファイルは、index の内容にあります。 main.jsの内容は以下の通りです。 コマンド実行後、package.jsonに以下のコードが追加されます
: { "vue": "^2.4" .2" }
main.js の内容を次のコードに変更します
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <script src="./dist/demo.js"></script> </body> </html>
babel を導入します
alert('hello world');
vue es6 の構文を使用するときによく使用されますが、現在多くのブラウザーは es6 をうまくサポートしていないため、これらの構文は、コンパイル中に es5 構文に変換する必要があります。現時点では、コンパイルに babel を使用します。
Babel の使用については、公式 Web サイトのドキュメント http://babeljs.cn/ をお読みください。
webpack.config.js 設定ファイルに babel を追加します:
npm install vue --save
次に、コマンドラインに webpack コマンドを入力してコンパイルが完了したら、ブラウザでindex.html ファイルを開きます。ブラウザ コンソールで次のエラーが発生します:
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})これは、vue のランタイム バージョンが使用されており、このバージョンのコンパイラを使用できないためです。これをランタイム + コンパイル済みバージョンに切り替える必要があります。設定ファイルに以下のコードを追加します
npm install --save-dev babel-core babel-loader
このとき、webpackコマンドを実行して再コンパイルします。コンパイル後、index.htmlページにアクセスします。ページの内容は以下のようになります
この時点では、vueプロジェクトが作成されています。 Webpackに基づいて構築されます。webpackのいくつかの一般的な構成
実際のプロジェクトの開発では、CSS、画像、フォントなどのリソースファイルも紹介します。これらのファイルを導入するには、それらをプロジェクトにロードして通常どおり使用するために、対応するローダーが必要です。
以下では、必要なローダーの使用方法のみを紹介します。詳細については、webpack ローダーのドキュメントを参照してください。
cssローダー
css-loaderとstyle-loaderを導入する必要があります（style-loaderをインストールする目的は、スタイルでHTMLにCSSを埋め込むことです）。
コマンドを実行
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
},
module:{
rules:[
{
test: /\.js$/,
loader:"babel-loader",
exclude: /node_modules/
}
]
}
}webpack.config.jsで以下を設定[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}その後、webpackを実行しますコマンドを再度実行し、index.html ファイルをリロードすると、以下のように CSS が有効になっていることがわかります
画像リソースの読み込み
file-loader または url-loader ローダーを使用します。ファイルと画像リソースをパッケージ化するために使用されます。この 2 つの違いは、url-loader が file-loader に基づいてカプセル化することです。
Web サイトにアクセスするときに写真が多い場合、多くの http リクエストが送信され、ページのパフォーマンスが低下します。この問題は url-loader で解決できます。 url-loader はインポートされた画像をエンコードし、dataURL を生成します。これは、画像データを文字列に変換し、その文字列をファイルにパッケージ化することと同じです。最後に、このファイルをインポートするだけで画像にアクセスできます。
もちろん、画像が大きい場合、エンコードによりパフォーマンスが消費されます。したがって、url-loader は制限パラメータを提供し、制限バイトより小さいファイルは DataURl に変換され、制限より大きいファイルは file-loader を使用してコピーされます。 ここでは url-loader を使用します。これは file-loader のカプセル化に基づいているため、file-loader も導入する必要があります。
npm install --save-dev css-loader style-loader
webpack.config.js のルールに次の設定を追加します
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
},次のステップは、コードに画像を導入することです。main.js とindex.html でそれぞれ次の変更を行う必要があります。 main.js
#app{
color:red;
}index .html
npm install --save-dev file-loader url-loader
最後にwebpackコマンドを実行してindex.htmlにアクセスすると、結果は以下の通りです
在测试中发现当图片大于10KB的时候发现加载图片失败，找不到图片，但此时在dist目录下面是能看到已经通过加载器加载成功了的图片，再通过浏览器的开发者工具对图片的引用路径进行检查时，可以发现页面中img的路径不对，路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改
logo:"./dist/"+logo,
重新编译后图片就显示出来了。但是现在新的问题又出来了，由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。 解决此问题有两种办法：
不使用base64的形式将图片内嵌到代码中
将html文件放到dist目录中 既然用了url-loader加载器则不推荐使用第一种。所以我们使用第二种方式。
将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：
<script src="./demo.js" > </script>
main.js中改回原来的设置
logo:logo,
重新编译后图片在两种情况下都可以加载出来了。
还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。
HtmlWebpackPlugin 插件
引入插件
npm install --save-dev html-webpack-plugin
webpack.config.js 中增加如下配置
const HtmlWebpackPlugin = require('html-webpack-plugin') ... plugins:[ new HtmlWebpackPlugin() ]
重新编译后发现在dist目录下生成了如下内容的html的文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="demo.js"></script></body> </html>
与我们原来自己的写index.html相比，该文件缺少了下面这些这些内容
<p id="app">
<img :src="logo" alt="logo" class="logo">
{{msg}}
</p>现在需要对配置文件做稍微的修改，让html文件在创建的时候自动将index.html的中内容复制过去。通过查阅该插件的文档，可知需做如下修改：
plugins:[
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
]index.html 文件中 去除 script代码，在重新编译后，即可获取我们需要的html文件
详细参数配置请参考官方文档
webpack-dev-server
在我们实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server 。
webpack-dev-server 为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。
npm install --save-dev webpack-dev-server
在webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "demo.js"
},
plugins: [
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
],
devServer:{
contentBase:"./dist"
},
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}上面红色字体的配置信息是告知webpack-dev-server， 在localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
让我们在package.json中添加一个script脚本,可以直接运行开发服务器(dev server)：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},然后输入如下命令
npm run dev
启动完成后，浏览器会自动打开一个访问 http://localhost:8080/ 的页面
此时服务已启动成功。
字体的加载
字体的加载方式与图片的一样也是用url-loader，配置如下
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}vue-loader
在vue的开发过程中，通常我们需要写.vue结尾的文件即组件，如app.vue
<template>
<p id="app">
<img src="./images/logo2.jpg" alt="logo" >
{{msg}}
</p>
</template>
<script>
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
}
}
</script>该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件
npm install --save-dev vue-loader vue-template-compiler
webpack.config.js 中
{
test: /\.vue$/,
loader: 'vue-loader'
}为了在vue中引入对.vue的使用，我们需进行如下修改
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <p id="app"> </p> </body> </html>
main.js
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})app.vue
<template>
<p id="app">
<img src="./images/logo.png" alt="logo" >
{{msg}}
</p>
</template>
<script>
export default {
name:'app',
data(){
return {
msg: 'hello vue !!'
}
}
}
</script>修改完成后 运行 npm run dev 命令 ，获得如下效果的页面
热部署
在上一步中，如果我们修改app.vue文件中的msg的参数，可以看到页面会自动刷新。但是此时是页面全局刷新的，如果我们只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:
new webpack.HotModuleReplacementPlugin()
然后去package.json中，script 里面dev的值中加上 --hot -only
"dev": "webpack-dev-server --hot-only --open",
然后重启服务，再修改 msg 的值，会发现此时值的改变是局部刷新的。
生产环境
如果我们在浏览器的控制台中发现有如下提示
意思时说项目现在运行在开发环境中，在部署到正式环境下时，要确保它是处于production的模式。需要将代码打包部署到生产环境时需要进行如下配置：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上がwebpackでvueプロジェクトをビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7644
15
1392
52
91
11
34
152
VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド
Jun 15, 2023 pm 06:17 PM
Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue3 は、多くの新機能が導入された Vue の最新バージョンです。 Webpack は現在最も人気のある JavaScript モジュール パッケージャーおよびビルド ツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。この記事では、Webpack を使用して Vue3 アプリケーションをパッケージ化してビルドする方法を紹介します。 1.Webpackをインストールする
Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明
Apr 24, 2023 am 10:52 AM
Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。
Vue3 で単体テストを作成する方法を調べる
Apr 25, 2023 pm 07:41 PM
Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。
JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析)
Mar 23, 2023 pm 07:53 PM
Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザー インターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。
vue がファイル スライス アップロードを実装する方法の簡単な分析
Mar 24, 2023 pm 07:40 PM
実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイル ストリームはいくつかの小さなファイル ストリームに分割され、インターフェイスはそれぞれの小さなファイル ストリームを配信するように要求されます。
vue3 で Amap API を使用する方法について話しましょう
Mar 09, 2023 pm 07:22 PM
Amap を使用したとき、公式から多くのケースやデモを勧められましたが、これらのケースはすべてネイティブ メソッドを使用してアクセスしており、vue や React のデモは提供されていませんでした。vue2 アクセスについてはオンラインで多くの人が書いていますが、この記事では、 vue3 が一般的に使用される Amap API をどのように使用するかを見ていきます。皆さんのお役に立てれば幸いです。
chatgpt のタイプライター効果を実現する vue3 の詳細な例
Apr 18, 2023 pm 03:40 PM
chatgpt ミラー サイトで作業していたときに、一部のミラー サイトにはタイプライター カーソル効果がなく、テキスト出力のみがあることがわかりました。とにかくやりたいです。そこで私はそれを注意深く研究し、タイプライターとカーソルの効果を認識しました。ここで、私の解決策とレンダリングを共有します~
モジュール開発に PHP と webpack を使用する方法
May 11, 2023 pm 03:52 PM
Web 開発テクノロジーの継続的な発展に伴い、フロントエンドとバックエンドの分離とモジュール開発が広く普及する傾向になりました。 PHP は一般的に使用されるバックエンド言語です。モジュラー開発を行う場合、モジュールの管理とパッケージ化にいくつかのツールを使用する必要があります。Webpack は非常に使いやすいモジュラー パッケージング ツールです。この記事では、モジュール開発に PHP と webpack を使用する方法を紹介します。 1. モジュラー開発とは何ですか? モジュラー開発とは、プログラムを、それぞれが独自の機能を持つ独立したモジュールに分解することを指します。
