草庐IT

gulp-webpack

全部标签

javascript - Gulp 实时重载

我有一个用Node.js构建的网站。我可以通过从命令行运行nodeserver.js来成功启动和运行站点。然后,我通过在浏览器中访问“http://localhost:3000”来访问该站点。我现在正在尝试改进网站周围的一些构建过程。为此,我依赖Gulp。我想在HTML或CSS文件发生更改时自动重新加载网页。我偶然发现了gulp-livereload插件。我已经按照文档中的描述安装了它。但是,当我在浏览器中访问“http://localhost:35729/”时,我只看到以下内容:{minilr:"Welcome",version:"0.1.8"}我的gulp任务是这样配置的:gulp

javascript - webpack 开发和生产构建模式有什么区别?

在Grunt或Gulp中,我过去常常自己定义所有要求,例如:只应为生产缩小内容,只应在开发服务器中启用livereload。Webpack通过its-dand-poptions自行处理这个问题,切换加载器的minimize模式(大多数加载器都附带了相关的缩小器)、devtool和类似的东西(我不知道到底是什么)。其中大部分“有效”。但另一方面,也有一些库具有开发和生产模式。例如,React会查看process.NODE_ENV,如果是production,则disablesthepropTypeschecking(稍后将被minifier剥离为死代码,从而减少包大小)。在Webpack

javascript - 为什么 Gulp 无法在更改时自动重新处理我的 JS?

在我的gulpfile.js中,JS更改会自动触发BrowserSync重新加载和我的JS处理任务。但出于某种原因,虽然重新加载确实有效,但我的JS任务无法正确处理JS更改并在dist/文件夹中创建新的JS文件。我必须为此重新启动Gulp。为什么?Gulpfile.js:vargulp=require('gulp');varsass=require('gulp-sass');varbrowserSync=require('browser-sync').create();varconcat=require('gulp-concat');varjshint=require('gulp-js

javascript - 在使用 webstorm 开发期间调试 gulp 插件的最佳方法是什么

我正在尝试寻找在使用webstorm进行开发期间调试gulp插件的最佳方法。我有一个项目示例和几个gulp插件,我想在终端中运行gulp命令后立即跟踪和检查webstorm中的代码。理想情况下,我想在webstorm中添加debugger语句或断点来跟踪代码执行。 最佳答案 使用这个guide(无耻的self推销)来设置你的配置。然后调试应该按原样工作。此外,您不需要单独从命令行运行gulp,因为webstorm会为您完成。 关于javascript-在使用webstorm开发期间调试g

javascript - 使用 webpack-dev-server 时 webpack 构建中缺少 bundle.js

我看了类似的,但找不到解决我问题的具体答案。我找不到bundle.js文件,即使我指定了它应该输出的位置并且一切都在浏览器中工作。我知道webpack-dev服务器正在从内存中加载文件并且没有任何内容被写入磁盘,我如何才能构建文件并将其添加到配置文件中输出属性中指定的目录?这是我的package.json:{"name":"redux-simple-starter","version":"1.0.0","description":"SimplestarterpackageforReduxwithReactandBabelsupport","main":"index.js","repos

javascript - Gulp Browsersync 每次文件更改都会导致多次重新加载

我将browsersync与Gulp结合使用,在特定文件更改时运行一些任务。每当我保存文件时,我的终端中都会出现10多个[BS]ReloadingBrowsers...并且性能缓慢是可以理解的。这是我的gulpfile:gulp.task('bowerJS',function(){gulp.src(lib.ext('js').files).pipe(concat('lib.min.js')).pipe(uglify()).pipe(gulp.dest('app/assets/js'));});gulp.task('bowerCSS',function(){gulp.src(lib.ex

javascript - 如何在带有 ES6 的 webpack 中的 Angular 之前包含 jQuery?

我试过这个:import$from'jquery';window.jQuery=$;importangularfrom'angular';但$.fn.scope未定义且ng-bind-html中的脚本不起作用InjectingascripttagwithngBindHtml也在webpack配置中尝试过这个module.exports={module:{loaders:[{test:/angular(\.min)?\.js$/,loader:"imports?$=jquery"},{test:/jquery(\.min)?\.js$/,loader:'expose?jQuery'}]}

javascript - Webpack 语法错误 : Unexpected token =>

我刚刚将我的项目从一台机器移动到另一台机器,当我运行webpack--watch时,我收到以下错误:C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186outputOptions.children=options.map(o=>o.stats);^^SyntaxError:Unexpectedtoken=>atexports.runInThisContext(vm.js:73:16)atModule._compile(module.js:443:25)atObject.Modul

javascript - vueJS + webpack : importing fonts, CSS 和 node_modules

我开始使用Vue.js和Webpack,我对如何正确导入和引用我的字体、CSS和node_modules有一些疑问。我使用vue-cli启动了我的应用程序,结果结构如下:buildconfignode_modulessrc--assets--components--routerstatic这是我的webpack.base.conf文件:varpath=require('path')varutils=require('./utils')varconfig=require('../config')varvueLoaderConfig=require('./vue-loader.conf')

javascript - 用于 sass 的 webpack live 热重载

我正在为ReactStarter构建工作流程,并希望在我更改scss文件时自动重新加载浏览器。目前,当我在我的index.js文件(设置为我的入口点)中进行更改时,webpack将热重新加载。但是,当我在scss文件中更改/添加scss代码时,它会被编译,但css不会在任何地方输出,也不会触发浏览器重新加载。我是webpack的新手,非常感谢这里的一些见解。这是我的webpack.config.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constExtractTex