Webpack プロジェクトの構成について

この記事では主に、複数ページの Vue プロジェクトの Webpack コンパイルに関する詳細な説明を紹介します。編集者はそれを共有し、参考にさせていただきます。エディターをフォローして見てみましょう

この記事では主に、複数ページの vue プロジェクトをコンパイルする webpack の構成の問題を紹介し、それを皆さんと共有します。詳細は次のとおりです:

一般に、vue プロジェクトをビルドする手順は次のとおりです。

1.nodejs環境のインストール

2、vue-cliをインストール

cnpm install vue-cli -g

3、vueプロジェクトをビルド

vue init webpack-simple vue-cli-multipage-demo

4、プロジェクトの依存関係パッケージをインストール

cnpm install

5、開発環境でプロジェクトを実行します:

npm run dev

以上の手順で簡単 vueプロジェクトの開発環境が基本的に構築できたので、次はコードを埋めていきます。

最近、このスキャフォールディングを使用して構築されたプロジェクトが私のニーズを満たすことができないという問題を発見しました。実際、この要件は、Vue が開発するのは単一のページです。アプリケーション（SPA）、ここでは複数のページの効果を実現する必要があります。それはどういう意味ですか？たとえば、Web ページを開発しているとき、リンクをクリックすると、ブラウザはコンテンツを表示するために新しいタブ ページを開くことがあります。このとき、新しく開かれたページは実際にはすでに複数のページになっています。 (SPA) は実際にルーティングを使用してメイン ページに複数のページを表示する前に、私たちに属していません。ただし、現時点では、新しくオープンしたページはメインページから分離されています。

vue-cli スキャフォールディングを通じて構築されたプロジェクトの webpack 構成ファイルは、単一ページのアプリケーション開発をサポートします。エントリ ファイルは 1 つだけです。そして最終的に作成されるのは 1 ページだけです。どうすれば私のニーズを満たし、webpack を同時に複数のページに便利にできるでしょうか? 実際、それは webpack を少し変更するだけで十分です。

まず、ビルド ファイルの下の utils.js ファイル内のフォルダー内のファイル パスを取得するメソッドを追加する必要があります。このメソッドは、ターゲット ファイルをオブジェクトの形式に解析します。
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
 var entries = {},
 basename, tmp, pathname;
 if (typeof (globPath) != "object") {
 globPath = [globPath]
 }
 globPath.forEach((itemPath) => {
 glob.sync(itemPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  if (entry.split('/').length > 4) {
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
  } else {
  entries[basename] = entry;
  }
 });
 });
 return entries;
}

次に、wenpack.base.conf.js ファイルを変更し、元のファイルを複数ファイルのエントリに変更する必要があります。

webpack.dev.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
 entry: entries,//这是通过前面新增的方法获取的文件路径对象
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 filename: '[name].js'
 }
 ...
}

webpack.dev および conf.js ファイルを変更する必要があります。ここでの主な目的は、元の構成されたホームページを変更することです

webpack。 dev.conf.js

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
 ...
});
//新增
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 inject: true,    // js插入位置
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

ここで新しいHtmlWebpackPluginのconfオブジェクトを変更すると、元の構成は単一のhtmlでしたが、pagesオブジェクトをループすることで複数のhtml構成オブジェクトが生成されるようになります。

上記の設定により、npm run dev を実行すると、webpack は複数のページを同時に処理し、wenpack.base.conf.js で設定された js ファイルを対応する HTML ページに挿入できます。

この時点で、プロジェクト npm run dev を実行すると、さまざまなページにアクセスできるようになります。複数のページを管理する必要があるため、さまざまなページにアクセスするためのディレクトリを src の下に作成する必要があることに注意してください。こうすることで、プロジェクトの構造がより明確になり、保守が容易になります。

これは私が書いたデモアドレスです。興味があれば、プルダウンして vue-cli-multi-page を見てください

実行後、http://localhost:8080/module/index にアクセスしてください。 .html を選択し、[新しいページを開く] ボタンをクリックします。

上記の構成は開発環境のみのものです。最後に、実稼働中に複数の HTML ファイルを dist で同時に生成できるように、実稼働環境の構成ファイル webpack.prod.conf.js も変更する必要があります。梱包。

webpack.prod.conf:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//这里是修改的部分，和webpack.dev.conf.js的修改是一样的
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',//生成 html 文件的文件名
 template: pages[pathname], // 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，
 inject: true,    // 注入选项。有四个选项值 true, body, head, false.true:默认值，script标签位于html文件的 body 底部,body:同 true,head:script 标签位于 head 标签内,false:不插入生成的 js 文件，只是单纯的生成一个 html 文件
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

vuejsでモジュール式に開発

VUEで配列更新関数を実装する方法

Vueプロジェクトを最適化するときに注意すべきことは何ですか?

以上がWebpack プロジェクトの構成についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。