草庐IT

webpack-hmr

全部标签

javascript - 如何使用 webpack 动态导入

我想使用FontAwesome的图标,但是整个包太大了,我只能选择我正在使用的图标我正在使用vue和webpack现在我有标准:import{library}from'@fortawesome/fontawesome-svg-core'import{faGemasfalFaGem,faDatabaseasfalFaDatabase}from'@fortawesome/pro-light-svg-icons'import{faGemasfarFaGem}from'@fortawesome/pro-regular-svg-icons'import{faGemasfasFaGem}from'

javascript - 如何使用 Webpack 将我的 React 网站打包到 'production'?

我设法使用了这个react-hot-boilerplate配置脚本来创建和测试一个简单的ReactFluxwebapp。既然我在运行npmstart时就有了一个我喜欢的网站,那么在配置中添加生产构建的最简单/最好的方法是什么?当我使用那个“package”命令时,我想要一个小的prod文件夹,其中包含我需要的所有最终html和缩小的js文件,这是我应该期待的吗?这是我的package.json:{"name":"react-hot-boilerplate","version":"1.0.0","description":"BoilerplateforReactJSprojectwith

javascript - 使用 webpack-dev-server 时,html-webpack-plugin 不会将 js 文件注入(inject) index.html

这是我的webpack配置:varpath=require('path');varwebpack=require('webpack')varHtmlWebpackPlugin=require('html-webpack-plugin')varfs=require('fs'),buildPath='./dist/';varfolder_exists=fs.existsSync(buildPath);if(folder_exists==true){require('shelljs/global')rm('-rf','dist')};module.exports={entry:'./src/

javascript - 如何在没有webpack dev server的情况下使用webpack进行开发?

我目前正在使用require.js用于开发,因此我可以快速迭代(更改文件、刷新页面、中间没有构建步骤),但我使用webpack作为构建工具,因为它优于r.js.我想完全摆脱require.js并在开发中使用webpack作为脚本加载器。我知道这正是webpackdevserver是为了,但我特别不想使用它。理想情况下,我会在中包含某种webpack加载程序,指向我的webpack.js构建配置,让它完成工作。 最佳答案 如果您不想使用webpack-dev-server,您可以使用webpack的监视功能在您进行更改时继续构建脚本。

javascript - 使用相对路径从根加载图像使用--> webpack - file-loader - Angularjs

我正在使用Webpack在我的HTML、CSS和JS上加载图像。我的配置是:{varpath=require('path');varwebpack=require('webpack');constHtmlWebpackPlugin=require('html-webpack-plugin');constExtractTextPlugin=require('extract-text-webpack-plugin');varconfig={entry:['angular','./src/lib.js','./src/app.js',],output:{path:path.join(__di

javascript - Webpack babel-loader runtime : Module build failed: TypeError: this. setDynamic 不是函数

我正在尝试将babel-loader与babel-plugin-transform-runtime一起使用。我已按照以下说明进行操作:https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code相关代码:rules:[//the'transform-runtime'plugintellsbabeltorequiretheruntime//insteadofinliningit.{test:/\.js$/,exclude:/(node_modules

javascript - 使用Webpack拆分出一个模块,以便在WebWorker中加载

我有一个使用webpack编译的网络应用程序。我的代码使用的模块之一名为table.js。直到最近,它还只是另一个模块,并已与其他所有内容一起编译到我的bundle.js文件中。现在我需要在WebWorker中运行table.js,所以我需要将它和它的依赖项拉到一个单独的文件中,该文件既可以独立加载,也可以由我的其他模块加载。起初我想在我的webpack.config.js的entry中包含table.js。varconfig={...entry:{app:['./src/main.js','./src/classes/table.js'],vendors:[],},...}那没用。然

javascript - 无法使用 webpack-isomorphic-tools 生成 webpack-assets.json

我正在尝试学习React以及围绕它构建的整个环境。我通过尝试构建自己的开发堆栈来做到这一点。我很长一段时间都无法解决的问题是如何在不失去服务器渲染能力的情况下提供CSS/Images。我阅读了一些教程并发现了webpack-isomorphic-tools我已经对它们进行了配置,并设法获得了对图像的支持,sass(转换为css)也是如此。但是,我遇到了一个问题,即我的webpack-assets.json文件没有生成,而是我看到了这个输出。(Imanagedtogetitgeneratedona2ndrunofnpmstartbeforethiscommit,butthatwasdef

javascript - 从 Webpack 3 迁移到 Webpack 4

我正在尝试迁移到Webpack4,但这真的很痛苦。经过几天将Webpack3插件移动到Webpack4原生东西后,我得到了js应该可以很好地渲染,但是当我访问我的网站时,我在控制台上收到了这条消息:UncaughtTypeError:(intermediatevalue)(intermediatevalue).push不是函数开启:(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["Index"],{这是我的Webpackoutput设置:output:{filename,path:path.resolve(__dir

javascript - 如何将 Webpack 生成的文件传递给 Gulp 流

考虑到以下WebpackGulp任务,如何将其与Gulp集成,以便在编译Webpack后将文件通过管道传输到Gulp,以便我可以运行进一步的任务?gulp.task('webpack',function(callback){webpackCompiler.run(function(err,stats){if(err){thrownewplugins.util.PluginError('webpack',err);}plugins.util.log('webpack',stats.toString({colors:true,}));callback();});});gulp.task('