Webpack構築vueプロジェクトゼロ基礎構築

Webpack構築vueゼロ基礎構築

webpack構築vueプロジェクト手順詳細

packageを初期化する.jsonファイル

wbepackパッケージングツールとwnepack足場

を取り付ける

出入口ファイル

を構成する.

bable(各ブラウザでコードをスムーズに実行するように適合)

を導入する.

HTMLファイルの自動生成

1.インストール依存

2.プロファイルの変更

3.テンプレートフォルダ

の作成

webpack-server(プロジェクト自己起動)

をインストール

1.インストール依存

インストールvue依存(vueファイルを識別するため)

webpack.config.jsフルコード

vue構造

を完備する

これでvueプロジェクトの構築が完了しました=.=

Webpack構築vueプロジェクト手順の詳細
自分でvueを構築しているのは多くの問題に直面しても多くの問題を調べて、模索して構築して完成して、ブログで記録して同時に記憶を強化します.
パッケージを初期化します.jsonファイル
1.フォルダを作成し、cmdコマンドウィンドウを開き、npm initコマンドを実行してpackageを初期化する.jsonファイル

 {
     
    "name": "demo1", 
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
     
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
  }

name
表示項目の名前
version
アイテムのバージョン番号を示します
description
プロジェクトの説明
main
プロジェクトのエントリファイル
script
スクリプトコマンド構成
author
作成者(プロジェクト作成者の名前を使用できます)
license
証明書
wbepackパッケージングツールとwnepack足場の取り付け
1.yarn add webpack webpack-cli--save-devまたはcnpm/npm install webpack webpack-cli--save-devを実行する

最初のwebpackは、インストールパッケージツール

を表す.

第2のwebpack-cliは、webpack足場

をインストールすることを示す.
2.次のbuildスクリプトのような構築スクリプトの構成

"scripts": {
     
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
}

構成完了後npm run buildコマンド実行プロジェクト構築

この場合、can not resolveがエラーになります./srcこれは、プロジェクトのエントリファイル

が見つからないためです.
解決策

プロジェクトルート木録にsrcフォルダ

を作成する

その後、srcフォルダにindexを追加する.jsファイルこの場合jsファイル名は

と勝手に命名できません.

解決完了後にnpm run buildコマンドを再実行すると、プロジェクトにdistフォルダが1つ増えていることがわかります.

distフォルダに圧縮jsファイルmainがある.jsはこのファイルにsrcフォルダの下にあるindexを見つけることができる.jsのコード

-プロジェクトのパッケージングに成功したことを示しますが、modeが設定されていないという警告が表示されます.

packageを構成する必要があります.jsonのスクリプトは次の

です.

npm run buildコマンド再実行警告消失

buildスクリプト生成jsファイルを実行すると圧縮実行devコマンドは

ではありません.

"scripts": {
     
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

production mode(生産モード)は、様々な最適化を開梱して使用することができる.圧縮、役割ドメイン昇格、tree-shakingなどが含まれます.

一方、開発モードは速度に対して最適化され、非圧縮bundle

のみが提供される.

webpack 4では、1行の構成なしでタスクを完了できます!-modeパラメータを定義するだけですべてのコンテンツが得られます!

出入口ファイルの設定
1.プロジェクトルートディレクトリにsrフォルダを作成し、srcファイルの下にmainを作成します.js

このときcmdウィンドウをパッケージnpm run buildコマンドを実行すると、エントリプロファイルの構成が変更されていないためエラーが発生します.このとき、プロジェクトルートディレクトリにwebpackを作成する.config.jsファイル

ファイルに

を書き込む

  const path = require('path')
  module.exports = {
     
    //                             
    // entry: './src/main.js'
    entry: {
     
      //               key(    output   )        js       
      index: './src/main.js'//             key = index
    },
    //            
    // publicPath : __dirname + '/static/'   publicpath(      )     
    // publicPath: '/'           
    // publicPath: './'       
    //  __dirname：       
    output: {
     
      publicPath: '/', //             // js         CDN   
      path: path.resolve(__dirname, 'dist'), //                         //          
      filename: 'index.js' //      js          
    }
  }

bableの導入(各ブラウザでコードをスムーズに実行するのに適しています)
1.npm i@babel/core babel-loader@babel/preset-env@babel/plugin-transform-runtime@babel/polyfill@babel/runtime--save-dev入力cmdインストールbabel依存2.インストールと同時にプロジェクトのルートディレクトリに名前を作成します.Babelrcの新しいファイルでBabelを構成します.

{
     
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

次の警告

が実行された場合

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version.
 Currently, we assume version 2.x when no version is passed. 
 Since this default version will likely change in future versions of Babel,
 we recommend explicitly setting the core-js version you are using via the `corejs` option. 
 
You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`
's `dependencies` section. If it doesn't, you need to run one of the following commands: 
 
  npm install --save core-js@2    npm install --save core-js@3 
  yarn add core-js@2              yarn add core-js@3

npmインストールだけじゃなくsave corejs@3設定も必要です.babelrc設定「corejs」:3

{
     
 "presets": [
   [
     "@babel/preset-env",
     {
     
       "useBuiltIns": "usage",
       "corejs": 3
     }
   ]
 ],
 "plugins": ["@babel/plugin-transform-runtime"]
}

3.インストール終了後webpack構成loader(ローダ)

//  webpack.config.js     
module: {
     
  rules: [
    {
     
      test: /\.js$/, //         js   
      exclude: /node_modules/, //           //           bable        
      use: {
     
        loader: 'babel-loader' //    babel-loader  //        loader  
      }
    }
  ]
}

HTMLファイルの自動生成
なぜHTMLファイルを自動的に生成するのかというと、indexを変更するたびにhtmlにjsファイルを導入するのは面倒ですが、パッケージの名前が変更されると、indexを修正する必要があります.htmlに導入されたjs名は、パッケージ化後にHTMLファイルを自動的に生成し、パッケージ化されたjsファイルを自動的に導入するプラグインを使用します.
1.インストール依存

インストールプラグインclean-webpack-pluginはdistフォルダhtml-webpack-pluginを削除して再生成するhtmlファイル

を自動的に生成するために使用される.

インストールコマンドnpm i html-webpack-plugin html-loader--save-dev

インストール後package.jsonは以下の通り:

//            
{
     
  "scripts": {
     
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
     
    "clean-webpack-plugin": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
     
    "lodash": "^4.17.11"
  }
}

2.プロファイルの変更

インストール後、webpackを完備する.config.jsは以下の

//      webpack          
const path = require('path') //              

//   clean-webpack-plugin                             
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin')

//       html     
const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
     
    entry: {
     
      index: './src/main.js'
    },
    output: {
     
      publicPath: '/',   // js         CDN   
      path: path.resolve(__dirname, 'dist'),   //          
      filename: 'index.js'  //        js   
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin ({
     
        title: '     ',
        minify: {
     
          removeComments: true, //      html      
          collapseWhitespace: true, //      html       
          minifyCSS: true //     css
        },
        filename: 'index.html' //      html    
      })
    ],
    module: {
     
        rules: [
        {
     
            test: /\.js$/,  //         js   
            exclude: '/node_modules/',  //         
            use: {
     
            loader: 'babel-loader' //    babel-loader
            }
        },
        {
     
          test: /\.vue$/, //vue  
          loader: 'vue-loader'
      }
     ]
    },
  }

3.テンプレートフォルダの作成

ルートディレクトリにテンプレートフォルダpublicを作成

publicに新しいファイルinsexを作成します.htmlは、構成コードが以下の

である.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<!--     html   -->
  <!-- <div>html  </div> -->
  <div id="app"></div>
</body>
</html>

weboackでconfig.jsのplugins構成template

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
     
      title: '     ', //   html   
      minify: {
     
        removeComments: true, //      html      
        collapseWhitespace: true, //      html       
        minifyCSS: true //     css
      },
      template: './public/index.html', //   html             --------------      
      filename: 'index.html' //      html    
      
    })
  ],

パッケージ化が必要なファイルタイトルがカスタマイズされている場合は、テンプレートファイル

を変更する必要があります.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--     html   -->
  <!-- <div>html  </div> -->
  <div id="app"></div>
</body>
</html>

Webpack-serverのインストール(プロジェクトの自己起動)
1.インストール依存

cmd実行インストールコマンドnpm i webpack-dev-server--save-dev

はpackageで起動コマンドを構成する.jsonにおける構成

 "scripts": {
     
    "serve": "webpack-dev-server",   //           
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

関連構成を追加してserverにそのファイル

を開くように伝える

webpack.config.jsでdevServer

を構成する

devServer: {
     
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, //         
    hot: true, //    
    overlay: true, //       ，         “   ”。    vue-cli     
    historyApiFallback: {
     
      // HTML5 history  
      rewrites: [{
      from: /.*/, to: '/index.html' }]
    }
  }

追加モード構成

  mode: 'development', //     
  devtool: 'source-map', //       //                          ，         
  devServer: {
     
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, //           //       
    hot: true, //    
    overlay: true, //       ，         “   ”。    vue-cli     
    historyApiFallback: {
     
      // HTML5 history  
      rewrites: [{
      from: /.*/, to: '/index.html' }]
    }
  }

加熱配置と熱負荷を追加(コードをリアルタイムで更新できるように)

webpack

を導入

const webpack = require('webpack')

webpackホットデプロイメントモジュール(webpack.config.jsのpluginsに書く)

を構成する

    new webpack.HotModuleReplacementPlugin(), //      
    new webpack.NamedModulesPlugin(),

  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), //      
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin ({
     
      title: '     ',
      minify: {
     
        removeComments: true, //      html      
        collapseWhitespace: true, //      html       
        minifyCSS: true //     css
      },
      template: './public/index.html', //   html          
      filename: 'index.html' //      html    
    })
  ],

注意点プロファイルが変更された場合は、プロジェクト

を再起動する必要があります.
vue関連依存のインストール(vueファイルの識別)

cmd運転npm install vue-router vue-loader vue-template-compiler--save-dev

webpack.config.js上にvueプラグイン

を導入

const VueLoaderPlugin = require('vue-loader/lib/plugin')

そしてwebpack.config.jsのpluginsでは

を参照

  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), //      
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),//  vue  
    new HtmlWebpackPlugin ({
     
      title: '     ',
      minify: {
     
        removeComments: true, //      html      
        collapseWhitespace: true, //      html       
        minifyCSS: true //     css
      },
      template: './public/index.html', //   html          
      filename: 'index.html' //      html    
    })
  ],

vueルール(webpack.config.jsのmodule)

を構成する

//  webpack.config.js     
   module: {
     
        rules: [
        {
     
            test: /\.js$/,  //         js   
            exclude: '/node_modules/',  //           //           bable        
            use: {
     
            loader: 'babel-loader' //    babel-loader //        loader  
            }
        },
        {
     
          test: /\.vue$/, //vue  
          loader: 'vue-loader' //    vue-loade //        loader  
      }
        ]
    },

ルートディレクトリのsrcにAppを新規作成する.vue(デフォルトのレンダリングファイル)構成コードは、次の

です.

<template>
  <div>
    vue
  </div>
</template>

mainを構成する.js(レンダリングvue)コードは次の

です.

import Vue from 'vue'
import App from './App.vue'
new Vue({
     
  router,
  render: h => h(App)
}).$mount('#app')

publicフォルダのindex.htmlにマウントポイントを設定する(正常に動作するかどうか実験する)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--     html   -->
  <!-- <div>html  </div> -->
  <div id="app"></div>  //     
</body>
</html>

webpack.config.js完全コード

//      webpack          
const path = require('path') //              

//   clean-webpack-plugin                             
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin')

//       html     
const HtmlWebpackPlugin = require('html-webpack-plugin')

//   webpack

const webpack = require('webpack')

//  vue  
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// console.log('publicPath:' + __dirname + '/static/')
// console.log('path:' + path.resolve(__dirname, 'static'))
module.exports = {
     
  entry: {
     
    app: './src/main.js' //          
  },
  output: {
     
    publicPath: '/', // js         CDN   
    path: path.resolve(__dirname, 'dist'), //          
    filename: 'bundle.js' //        js   
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), //      
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin ({
     
      title: '     ',
      minify: {
     
        removeComments: true, //      html      
        collapseWhitespace: true, //      html       
        minifyCSS: true //     css
      },
      template: './public/index.html', //   html          
      filename: 'index.html' //      html    
    })
  ],
  //  webpack.config.js     
  module: {
     
        rules: [
        {
     
            test: /\.js$/,  //         js   
            exclude: '/node_modules/',  //           //           bable        
            use: {
     
            loader: 'babel-loader' //    babel-loader //        loader  
            }
        },
        {
     
          test: /\.vue$/, //vue  
          loader: 'vue-loader' //    vue-loade //        loader  
      }
        ]
    },
  mode: 'development', //     
  devtool: 'source-map', //     
  devServer: {
     
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, //         
    hot: true, //    
    overlay: true, //       ，         “   ”。    vue-cli     
    historyApiFallback: {
     
      // HTML5 history  
      rewrites: [{
      from: /.*/, to: '/index.html' }]
    }
  }
}

npm run serveを実行して、プロジェクトが正常に実行できるかどうかを確認します.
vue構造の整備

srcでフォルダviewsを新規作成

新しいHome.vueファイルの構成は次の

です.

<template>
  <div class="home">
      home  
  </div>
</template>

srcにフォルダを新規作成するcomponents

srcでフォルダrouterを新規作成

新規マスタールーティングファイルindex.js構成は以下の

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
     
    path: '/',
    name: 'home',
    component: Home
  }
]

let router = new VueRouter({
     
  routes
})

export default router

そしてmain.jsに

を導入

import Vue from 'vue'
import router from './router/index'
import App from './App.vue'
new Vue ({
     
    el:'#app',
    router,
    render: h=>h(App)
})

はApp.vueにルーティングを加えるデフォルトページ

を表示する

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

これでvueプロジェクトの構築が完了しました=.=