Webpack Encore - 如何导入任何库(如果可能的话缩小版本)?
Webpack Encore - How to import any library (minified version if possible)?
我在使用 webpack Encore 时遇到了一些问题。
我正试图将这个库添加到我的项目中:https://github.com/dinbror/blazy 但是当我对该库中的 js 文件(无论是否缩小)提出要求时,我收到了这个错误
jquery.js:3827 Uncaught ReferenceError: Blazy is not defined
at HTMLDocument.<anonymous> (reader_init.js:215)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)
我这样要求:require('../vendor/bLazy/blazy');
(vendor 是安装我的 Bower dep 的文件夹)
库在生成的文件中。
所以我想知道是否有办法通过 webPack Encore 要求任何库?
ps:有关信息,它与 historyjs 库配合使用效果很好(不过仅限非缩小版本)
require('../vendor/history.js/scripts/bundled-uncompressed/html5/jquery.history');
这是我的 webpack.config.js 如果它可以帮助
// webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath((!Encore.isProduction())?'/rapp/public/build':'/build')
// this is now needed so that your manifest.json keys are still `build/foo.js`
// i.e. you won't need to change anything in your Symfony app
.setManifestKeyPrefix('build')
// will create public/build/main.js and public/build/main.css
.addEntry('main', './assets/js/main.js')
//Add entry if other js/css needed. first parameter is the generated filename.
//require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
.addEntry('reader', './assets/js/reader.js')
//file upload with dropzone
.addEntry('dropzone', './assets/js/dropzone.js')
//Admin chapter js
.addEntry('admin-chapter', './assets/js/chapter.js')
//addStyleEntry : for css file only
// allow sass/scss files to be processed
.enableSassLoader()
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()
.createSharedEntry('vendor', [
'jquery',
])
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
.configureFilenames({
images: '[path][name].[hash:8].[ext]'
})
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
编辑解决方案:我看到一条对我有帮助的评论(感谢您)
import Blazy from '../vendor/bLazy/blazy.min'
效果很好。
我认为 required()
方法等同于 import
但似乎不是。
import Blazy from '../vendor/bLazy/blazy.min'
感谢评论的人。
ps :我没有看到如何在没有任何答案的情况下标记为已解决所以我做了这个 select 作为答案
我在使用 webpack Encore 时遇到了一些问题。 我正试图将这个库添加到我的项目中:https://github.com/dinbror/blazy 但是当我对该库中的 js 文件(无论是否缩小)提出要求时,我收到了这个错误
jquery.js:3827 Uncaught ReferenceError: Blazy is not defined
at HTMLDocument.<anonymous> (reader_init.js:215)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)
我这样要求:require('../vendor/bLazy/blazy');
(vendor 是安装我的 Bower dep 的文件夹)
库在生成的文件中。
所以我想知道是否有办法通过 webPack Encore 要求任何库?
ps:有关信息,它与 historyjs 库配合使用效果很好(不过仅限非缩小版本)
require('../vendor/history.js/scripts/bundled-uncompressed/html5/jquery.history');
这是我的 webpack.config.js 如果它可以帮助
// webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath((!Encore.isProduction())?'/rapp/public/build':'/build')
// this is now needed so that your manifest.json keys are still `build/foo.js`
// i.e. you won't need to change anything in your Symfony app
.setManifestKeyPrefix('build')
// will create public/build/main.js and public/build/main.css
.addEntry('main', './assets/js/main.js')
//Add entry if other js/css needed. first parameter is the generated filename.
//require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
.addEntry('reader', './assets/js/reader.js')
//file upload with dropzone
.addEntry('dropzone', './assets/js/dropzone.js')
//Admin chapter js
.addEntry('admin-chapter', './assets/js/chapter.js')
//addStyleEntry : for css file only
// allow sass/scss files to be processed
.enableSassLoader()
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()
.createSharedEntry('vendor', [
'jquery',
])
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
.configureFilenames({
images: '[path][name].[hash:8].[ext]'
})
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
编辑解决方案:我看到一条对我有帮助的评论(感谢您)
import Blazy from '../vendor/bLazy/blazy.min'
效果很好。
我认为 required()
方法等同于 import
但似乎不是。
import Blazy from '../vendor/bLazy/blazy.min'
感谢评论的人。
ps :我没有看到如何在没有任何答案的情况下标记为已解决所以我做了这个 select 作为答案