エンタープライズコラボレーション-2 vue.js WebPack

2871 ワード
webpack vue テキストリンク

WebPack?

  • パッケージBundler:複数のモジュールをバンドルしてHTTP呼び出しを減らす
  • スクリプトの増加に伴って増加
  • 複数のスクリプトを統合

    • WebPack設定

  • npm init->package nameを設置してから残りの企業
  • npm i vue->Vue取付
  • npm i webpack webpack-cli -D->「-D」オプションで開発する場合のみ使用
  • ルートwebpack.config.jsファイル作成
    • module.exports = {
	entry:{				  
    	app: './main.js',
    },
    output: {
    	filename: "main.js",
    	path: path.resolve(__dirname, "./dist"),
  },
    module: {
    	rules: [{
        
        }],
    },
    plugins: [],
    output: {			
    	filename: 'app.js', 
        path: './dist',
    },
};

    WebPack構成


    Mode
    種類:production・developement・noneEntry
    依存図面の起動ファイルの設定
    デフォルト:./src/index.jsOutput
    依存モジュールとして作成されたバンドルの成果物の場所を指定します.
    デフォルト:./dist/main.jsLoader
    Loaderは、WebパッケージがJavaScriptファイルではなく、Webアプリケーションの解析時にWebリソース(HTML、CSS、Images、フォントなど)を変換するのに役立つ属性です.
    Plugins
    プラグイン(plugin)プロパティは、Webパッケージの基本的な動作に追加機能を提供します.

    作成したWebパッケージ

    const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      { test: /\.vue$/, use: "vue-loader" },
      { test: /\.css$/, use: ["vue-style-loader", "css-loader"] },
      {
        test: /\.scss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new VueLoaderPlugin(),
    new webpack.ProgressPlugin(),
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
  ],
  devServer: {
    open: true,
    hot: true,
    noInfo: true,
    overlay: true,
    historyApiFallback: true,
  },
  devtool: "#eval-source-map",
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
};
    com.esotericsoftware.kryo.KryoException: Buffer overflow. Available: 0, required: 1
    1.android opengl入門の一つ