webpackでvueプロジェクトをビルドする方法

亚连
リリース: 2018-06-14 17:57:17
オリジナル
5124 人が閲覧しました

この記事では主に webpack を使用して vue プロジェクトをビルドする手順を紹介します。

準備

  1. webpack

  2. vue.js

  3. npm

  4. nodejs

  5. 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(&#39;hello world&#39;);
ログイン後にコピー

vue es6 の構文を使用するときによく使用されますが、現在多くのブラウザーは es6 をうまくサポートしていないため、これらの構文は、コンパイル中に es5 構文に変換する必要があります。現時点では、コンパイルに babel を使用します。

Babel の使用については、公式 Web サイトのドキュメント http://babeljs.cn/ をお読みください。

webpack.config.js 設定ファイルに babel を追加します:

npm install vue --save
ログイン後にコピー

次に、コマンドラインに webpack コマンドを入力してコンパイルが完了したら、ブラウザでindex.html ファイルを開きます。ブラウザ コンソールで次のエラーが発生します:

import Vue from &#39;vue&#39;
var vm = new Vue({
 el:&#39;#app&#39;,
 data:{
  msg:&#39;hello vue&#39;
 }
})
ログイン後にコピー

これは、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(&#39;path&#39;)

module.exports ={
 entry:&#39;./src/main.js&#39;,
 output:{
  path:path.resolve(__dirname,&#39;dist&#39;),
  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>)
ログイン後にコピー
その後、srcディレクトリにstylesフォルダーを作成し、その中にmain.cssファイルを追加し、以下の内容を記述します

resolve: {
 alias: {
  &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; 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: &#39;style-loader!css-loader&#39;
  }]
 },
ログイン後にコピー

次のステップは、コードに画像を導入することです。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" 这个前缀的。 解决此问题有两种办法:

  1. 不使用base64的形式将图片内嵌到代码中

  2. 将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(&#39;html-webpack-plugin&#39;)
...

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: &#39;vue demo&#39;,
   template: &#39;index.html&#39;   
  })
]
ログイン後にコピー

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(&#39;path&#39;)
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)

module.exports = {
  entry: &#39;./src/main.js&#39;,
  output: {
    path: path.resolve(__dirname, &#39;dist&#39;),
    filename: "demo.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: &#39;vue demo&#39;,
      template: &#39;index.html&#39;
    })
  ],
  devServer:{
    contentBase:"./dist"
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: &#39;style-loader!css-loader&#39;
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      }
    ]
  },
  resolve: {
    alias: {
      &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; 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: &#39;url-loader&#39;,
  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:&#39;app&#39;,
    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: &#39;vue-loader&#39;
 }
ログイン後にコピー

为了在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 &#39;vue&#39;
import &#39;./styles/main.css&#39;
import App from &#39;./app.vue&#39;

new Vue({
  el: &#39;#app&#39;,
  template: &#39;<App/>&#39;,
  components: { App }
})
ログイン後にコピー

app.vue

<template>
  <p id="app">
    <img src="./images/logo.png" alt="logo" >
    {{msg}}
  </p>
</template>
<script>
  export default {
    name:&#39;app&#39;,
    data(){
      return {
        msg: &#39;hello vue !!&#39;
      }
    }
  }
</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(&#39;webpack&#39;)
module.exports = {
// ...
plugins: [
// ...
  new webpack.DefinePlugin({
    &#39;process.env&#39;: {
      NODE_ENV: &#39;"production"&#39;
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]}
ログイン後にコピー

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue-cli中如何实现为单独页面设置背景色

在Vue中如何实现点击后文字变色

使用JS如何实现循环Nodelist Dom列表

以上がwebpackでvueプロジェクトをビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート