我是Webpack的新手,正在将其安装在一个大项目中。
/js
文件夹中的所有文件似乎都已编译,即使它们是.ts
,.php
,.png
,过时且未使用的.js
文件等等。
编译后的文件为HUGE: 87 MB 。 它包含我不再使用的JS插件,所有TinyMCE插件(我只使用1个),大图片... 调试一些错误后,我注意到它甚至在解析PHP文件和未使用的图像。
他甚至试图导入Typescript源,这是webpack-cli
工具的一些错误:
Error loading ./web/js/vendor/formvalidation-dist-v1.5.0/src/js/plugins/Declarative.ts
FIX To process TypeScript files:
1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.
2. Install typescript & ts-loader to use enableTypeScriptLoader()
npm install typescript ts-loader@^5.3.0 --save-dev
Error loading ./web/js/vendor/formvalidation-dist-v1.5.0/src/js/plugins/Trigger.ts
FIX To process TypeScript files:
1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.
2. Install typescript & ts-loader to use enableTypeScriptLoader()
npm install typescript ts-loader@^5.3.0 --save-dev
Error loading ./web/js/vendor/formvalidation-dist-v1.5.0/src/js/validators/between.ts
FIX To process TypeScript files:
1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.
2. Install typescript & ts-loader to use enableTypeScriptLoader()
npm install typescript ts-loader@^5.3.0 --save-dev
Error loading ./web/js/vendor/formvalidation-dist-v1.5.0/src/js/plugins/Dependency.ts
FIX To process TypeScript files:
1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.
2. Install typescript & ts-loader to use enableTypeScriptLoader()
npm install typescript ts-loader@^5.3.0 --save-dev
我的webpack.config.js
(使用Symfony Encore插件):
let Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
//Encore.configureRuntimeEnvironment();
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build/')
.addEntry('app-classes','./web/js/assets/app-classes.js')
.enableSingleRuntimeChunk()
.autoProvidejQuery()
;
var config = Encore.getWebpackConfig();
config.node = { fs: 'empty' };
config.module = {
rules: [
{
test: /\.css$/i,use: [ 'style-loader','css-loader' ]
},{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?[^?]+)?$/,use: ['url-loader?limit=100000']
}
]
};
module.exports = config;
仅条目app-classes.js
,其中包含大量导入(由webpack合法编译):
require('../Business/init.js');
猜猜这是不正常的。 有什么主意吗?