AngularJS(1.4.X) プロジェクトの既存の Ruby ベースのビルド システムを Webpack に移行しようとしています。プロジェクトコードはJSモジュールを使用しておらず、古い学校のAngularコードパターンを使用しています.Webpackがプロジェクト内のすべてのコントローラーとファクトリーファイルをどのように見つけるかわかりません.
フォルダ構造は、
-app
- assets
- javascripts
- ctrl
- controllerA.js
- controllerB.js
-services
-serviceA.js
-serviceB.js
- angular.min.js
- angular-route.js
- main.js
エントリ ポイントで main.js を使用すると、ビルド フォルダーにコピーされますが、babel-loader を .js ルールに使用しても、他のファイルは Webpack によって処理されません。
私が考えることができる1つのオプションは、 https://www.npmjs.com/package/webpack-merge-and-include-globallyのようなものを使用して、他のすべてのファイルを別のバンドルファイルに使用すること ですが、存在するかどうかを知りたいですそれを行うためのより良い方法。
私の現在のwebpack構成は以下の通りです。
module.exports = {
context: __dirname +'/app',
entry: {
'app-portal': [
'/assets/javascripts/main.js',
'/assets/javascripts/angular.min.js',
'/assets/stylesheets/portal/style.css',
'/assets/stylesheets/portal/navbar.css',
'/assets/stylesheets/portal/animation.css',
'/assets/stylesheets/portal/bootstrap.min.css',
'/assets/stylesheets/portal/bootstrap-notify.css',
'/assets/stylesheets/portal/fontello.css',
]
},
output: {
path: __dirname + "/dist/assets",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options: {
sourceMap: true,
url: false,
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './views/portal/index.html',
filename: '../index.html',
}),
new MiniCssExtractPlugin({
filename: './[name].css',
linkType: false,
ignoreOrder: false,
}),
new CopyPlugin({
patterns: [
{
from: './views/portal/**/*.*',
to: "../[name].[ext]",
globOptions: {
ignore: [
'**/index.*',
],
},
},
{
from: './assets/fonts/*.*',
to: "./[name].[ext]",
},
{
from: './assets/images/portal/*.*',
to: "./[name].[ext]",
},
{
from: './assets/theme/*.*',
to: "./[name].[ext]",
}
]
}),
],
WebpackプラグインやAngularJSの戦略で提案されているようにソースコードを変更したくないので、おそらくWebpackは私にとって適切なソリューションではありません