Webpack Symfony 4.1项目中的纱线和网页包Encore配置 介绍

我正在一个需要上传文件的项目上试用

Symfony 4.1

+

warn

+

Webpack Encore

。为此，我选择了

oneuploaderbundle

with

Blueimp jquery file upload

frontend

但由于所需的配置数量太多，所以会受到一些影响 与旧的scool方法相比，添加

CSS

和

JavaScript

无论何处需要它们——但没有包装的优势 管理层

当然，使用包管理器可以轻松地更新依赖项 这是有代价的。但是在初始配置之后 构建编译之后很容易，或者被认为很容易

问题 我想能够上传文件使用前面提到的组合库。我正在寻找正确的配置

目前构建没有编译-我得到一个错误

ERROR  Failed to compile with 1 errors
This dependency was not found:
* jquery-ui/ui/widget in ./node_modules/blueimp-file-upload/js/jquery.fileupload.js

正如您从所附的代码中看到的，我试图为

jqueryui/ui/widget

提供别名，但它并没有导致找到包

另外，在warn目录中没有包

jqueryui/ui/widget

，但是 有一个

jquery.ui.widget

，我试图要求它，但没有成功

代码 Webpack.config.js

var Encore = require('@symfony/webpack-encore');

const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')
    .addEntry('blueimp', './assets/js/blueimp.js')

    .addStyleEntry('global', './assets/css/global.scss')
    .addStyleEntry('admin', './assets/css/admin.scss')

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'jquery.ui.widget': 'jquery-ui/ui/widget'
    })

    .enableSourceMaps(!Encore.isProduction())

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

// loads the jquery package from node_modules
var $ = window.$ = window.jQuery = require('jquery');

// or you can include specific pieces
require('bootstrap/dist/js/bootstrap');

'use strict';

// add upload
require('blueimp-file-upload/css/jquery.fileupload.css');
require('blueimp-file-upload/css/jquery.fileupload-ui.css');

require('jquery/dist/jquery.js');
require('jquery.ui.widget/jquery.ui.widget.js');
require('blueimp-file-upload/js/jquery.fileupload.js');
require('blueimp-file-upload/js/jquery.iframe-transport.js');

Package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.1",
        "copy-webpack-plugin": "^4.5.1"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "blueimp-file-upload": "^9.22.0",
        "bootstrap": "^4.1.3",
        "jquery": "^3.3.1",
        "jquery.ui.widget": "^1.10.3",
        "jstree": "^3.3.5",
        "node-sass": "^4.9.2",
        "popper.js": "^1.14.3",
        "sass-loader": "^7.1.0"
    }
}

main.js

var Encore = require('@symfony/webpack-encore');

const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')
    .addEntry('blueimp', './assets/js/blueimp.js')

    .addStyleEntry('global', './assets/css/global.scss')
    .addStyleEntry('admin', './assets/css/admin.scss')

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'jquery.ui.widget': 'jquery-ui/ui/widget'
    })

    .enableSourceMaps(!Encore.isProduction())

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

// loads the jquery package from node_modules
var $ = window.$ = window.jQuery = require('jquery');

// or you can include specific pieces
require('bootstrap/dist/js/bootstrap');

'use strict';

// add upload
require('blueimp-file-upload/css/jquery.fileupload.css');
require('blueimp-file-upload/css/jquery.fileupload-ui.css');

require('jquery/dist/jquery.js');
require('jquery.ui.widget/jquery.ui.widget.js');
require('blueimp-file-upload/js/jquery.fileupload.js');
require('blueimp-file-upload/js/jquery.iframe-transport.js');

blueimp.js

var Encore = require('@symfony/webpack-encore');

const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')
    .addEntry('blueimp', './assets/js/blueimp.js')

    .addStyleEntry('global', './assets/css/global.scss')
    .addStyleEntry('admin', './assets/css/admin.scss')

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'jquery.ui.widget': 'jquery-ui/ui/widget'
    })

    .enableSourceMaps(!Encore.isProduction())

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

// loads the jquery package from node_modules
var $ = window.$ = window.jQuery = require('jquery');

// or you can include specific pieces
require('bootstrap/dist/js/bootstrap');

'use strict';

// add upload
require('blueimp-file-upload/css/jquery.fileupload.css');
require('blueimp-file-upload/css/jquery.fileupload-ui.css');

require('jquery/dist/jquery.js');
require('jquery.ui.widget/jquery.ui.widget.js');
require('blueimp-file-upload/js/jquery.fileupload.js');
require('blueimp-file-upload/js/jquery.iframe-transport.js');

非常感谢。 感谢您的回答。

对我有效的是直接在web包配置上。注意，我还需要

路径

模块

var Encore = require('@symfony/webpack-encore');
var path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');


Encore
    .setOutputPath('public/build/')
    // ...
;

var config = Encore.getWebpackConfig();

config.resolve.alias = {
    'jquery-ui/ui/widget': path.resolve(__dirname, 'node_modules/jquery.ui.widget/jquery.ui.widget.js')
};

module.exports = config;

---

afaik

AutoProviderVariables（）

不定义别名@rikijs谢谢！您对配置所做的更改将生成无错误的生成。