草庐IT

gulp-webpack

全部标签

javascript - 使用 Webpack 报错 : Bootstrap's JavaScript requires jQuery,

我是webpack的新手,但我开始在我的一个项目中使用它来了解它。我想将jQuery与Bootstrap一起使用,但是,当我启动该应用程序时,出现以下错误:bootstrap.min.js?5802:6UncaughtError:Bootstrap'sJavaScriptrequiresjQuery在我的webpack配置中,我定义了两个入口点,一个用于项目的库,一个用于外部库,称为vendor,如jQuery、Bootstrap等。在vendor中,我在jQuery库之后定义了Bootstrap库,但我无法摆脱错误。关于我遗漏了什么的任何线索?这是我的网络应用配置:importweb

javascript - Webpack:如何使用 webpack-dev-server 编译、写入磁盘和提供静态内容(js/css)

我想构建我的js/css代码,将其写入磁盘并在单个命令中使用webpack-dev-server提供服务。我不想为生产模式设置另一台服务器。我们该怎么做呢?下面分享我的webpack.config.js文件内容:module.exports={watch:true,entry:['./src/index.js'],output:{path:__dirname+'/dist/',publicPath:'/dist/',filename:'bundle.js'},module:{loaders:[{exclude:/(node_modules)/,loader:'babel',query:

javascript - gulp-mocha 如何传​​递编译器标志?

我正在尝试使用gulp-mochamodule但无法找到传递编译器标志的好方法。有没有办法将其包含在我的gulp任务中?也许以某种方式在一个单独的管道中?从命令行运行mocha的示例(工作正常)mocha--compilers.:my_compiler.jstest/**/*.js使用gulp-mocha的示例(但我可以在哪里指定编译器)?gulp.task('test',function(){gulp.src(["test/**/*.js"],{read:false}).pipe(mocha({reporter:'spec'})).pipe(exit());});我在gulp-moc

javascript - Webpack ProvidePlugin/vendor bundle : angular. 模块不是函数

我有一个Angular应用程序,目前通过Webpack构建成一个大包,在一个文件中包含所有依赖项和应用程序代码。我试图将代码分成两个包,一个包含我的所有依赖项,另一个包含我的所有应用程序代码。我有以下webpack.config.js:varwebpack=require('webpack');varpath=require('path');vardefinePlugin=newwebpack.DefinePlugin({'process.env':{NODE_ENV:`"${process.env.NODE_ENV}"`}});varSRC=path.resolve(__dirnam

javascript - 有没有办法结合 Webpack 模块来减小文件大小?

我正在使用CSS模块,所以Webpack生成的很多模块看起来像这样:124:function(t,e,n){t.exports={textarea:"TextareaStyles__textarea"}},然后,在React中使用:returnt(r,{onInput:o(this,"str"),class:a.a.textarea})如果Webpack将CSS模块和React组件合并到一个模块中,它会更小。然后,Uglify/Terser可能只是将其内联:returnt(r,{onInput:o(this,"str"),class:"TextareaStyles__textarea"

javascript - 如何将外部从 webpack 传递到 jest?

我在grunt构建过程中得到了这个webpack配置:module.exports={options:{output:{path:path.resolve('../ui/static/js'),filename:'[name].js',chunkFilename:'[id].[name].js',libraryTarget:'amd',library:'[name]'},externals:['jquery','lodash','backbone','backbone.layoutmanager','moment','spin','lib/select2.min','dispatche

javascript - 如何在 webpack 配置下拆分媒体查询?

因为我们可以像下面这样导入样式表:这将有助于通过仅加载满足media属性条件的css文件来更快地加载网站。MDN我没有找到可以拆分查询的webpack配置,或者至少让我手动指定哪个css条目应该加载到哪个媒体上。我唯一的解决方案是编写nodejs脚本并在构建时注入(inject)index.html但在我看来这不是一个干净的方法。那么有没有针对这种东西的webpack配置? 最佳答案 这更像是评论,但我相信有一个插件:https://github.com/SassNinja/media-query-pluginHaveyouever

javascript - 当 jshint 发出警告时,如何使 Webpack 退出并出错?

使用jshint-loader与Webpack,当JSHint发出警告时,如何使webpack命令失败?如果linting检测到问题,我希望CI构建失败。目前,我只是将Webpack配置为在预加载JS文件时运行jshint-loader://webpack.config.jsmodule.exports={module:{preLoaders:[{test:/\.js/,exclude:/node_modules/,loader:'jshint-loader',},],},}; 最佳答案 首先,jshint-loader必须配置为在

javascript - 只最小化一个 Webpack block

我想在生产环境中尽量减少我的Javascript代码。但是我不想最小化vendor的代码,因为他们已经有了最小化版本。我当前的webpack.config.js将输出代码分成两block。module.exports={entry:{vendor:['jquery','angular'],app:['./Client/app.start.js']},output:{filename:'bundle.js',path:__dirname},resolve:{alias:{'angular':'angular/angular.min.js','jquery':'jquery/dist/jq

javascript - Babel 和 Browserify/Webpack 混淆

快速提问。我对ES2015(ES6)有点困惑。假设我使用Babel将ES6Javascript编译为兼容当前浏览器的ES5。import/export函数已经在ES6中通过使用Babel提供。那么,当ES6可以为我做这件事时,如果我只是简单地使用它们来捆绑我的模块,为什么我需要像Browserify或Webpack这样的东西呢?无论我走到哪里,我都会看到人们将Babel与Browserify或Webpack结合使用。虽然我知道像Webpack这样的东西可以用于更多,但我想知道是否也可以使用ES6语法来打包文件。我在这里可能完全错了,我可能迷失在2016年的Javascript丛林中,所