草庐IT

Webpack4

全部标签

python - 在局域网中查看Django和webpack建站

我正尝试在其他设备(例如手机或其他笔记本电脑)上查看本地服务的网站。在我目前的笔记本电脑上,网站运行良好,我看到了所有内容(前端),当我访问该网站时,我得到了200秒。但是,当我尝试使用我的iPhone和第二台笔记本电脑访问该站点时,我没有看到任何前端,但当我尝试访问该站点时确实出现了200秒。我工作机器上的终端也告诉我有请求进来。我使用Django作为后端,我使用webpack捆绑/构建我的Javascript和CSS,并使用webpack-dev-server提供服务.当我运行webpack时,我看到这条消息:http://0.0.0.0:3000/webpackresultiss

javascript - 使用 webpack 代码拆分,如何加载 block 和 HTML 布局?

我使用webpack构建block,按需加载(代码拆分);每个block都将React组件渲染成DOM元素(divs)。我需要HTML来创建这些div:我应该如何以及何时加载相应的HTML?我应该如何按需加载block?我使用jQuery的load从容器中的文件插入HTML的函数divs.另外我放了一个标记来告诉应该加载哪个block,但我发现与我的应用程序代码的其余部分相比,它很笨拙而且一点也不优雅。有没有更简单的方法来做到这一点? 最佳答案 您应该使用require.ensure进行动态路由加载。更好的是,如果您将项目设置为使用

javascript - 使用 extract-text-webpack-plugin 和在 HTML header 中链接合并的 CSS 文件有什么区别?

据我了解,extract-text-webpack-plugin将您的React组件中导入的所有css文件捆绑到一个单独的CSS文件中。然后可以在HTMLheader中引用单独的CSS文件,以防止FOUC(FlashOfUnstyledContent)。使用extract-text-webpack-plugin抵消了在React组件js文件中导入CSS的一些好处,例如热加载。那么,使用extract-text-webpack-plugin和将组件文件中的所有样式表导入替换为HTML模板标题中合并的CSS文件的单个链接之间有什么区别?使用CSS模块还是导入CSS重要吗?更新:添加示例以进

php - Laravel Autoprefixer 不能在 webpack 中工作

当我运行命令npmrunproduction时,我的style.css没有css前缀。我正在使用:Laravel:5.6.39&Laravel-mix:4.1.2文件webpack.mix.js:mix.sass('resources/assets/sass/style.scss','public/css').options({postCss:[require('autoprefixer')({browsers:['last40versions'],grid:true})]});文件style.scssimg{-webkit-transform:translate(-50%,-50%)

webpack性能优化方案

webpack性能优化从两个方向来考虑:优化打包速度和优化打包文件大小。一,优化打包速度1.webpack区分环境配置文件,避免加载多余的插件。2.对webpack的resolve参数进行合理配置,减少查找过程。webpack的resolve常用配置如下。resolve:{//extensions表示的是可省略的文件拓展名,参数是一个数组extensions:['.js','.jsx'],//alias的意思为别名,能把原导入路径映射成一个新的导入路径,减少查找过程。将resolve.alias设置为false将告知webpack忽略模块。alias:{alias:path.resolve(_

javascript - 在 webpack 中使用 html-webpack-plugin 和 string-replace-loader

我正在尝试替换index.html中的变量,如下所示:在我使用的配置文件中:{test:/index\.html$/,loader:'string-replace',query:{search:'$variable',replace:'stufftoinject',},}在loaders阵列,然后在plugins:newHtmlWebpackPlugin({template:conf.path.src('src/index.html'),inject:true,})但是这个设置会导致:ERRORin./~/html-webpack-plugin/lib/loader.js!./src/

html - webpack4 不会编译所有的 html 文件?

Iinitiallydidnotcorrectlyunderstandtheessenceoftheproblem,Icorrectthequestion,soastomoreaccuratelyformulatetheproblem...有这样一个程序集webpack:'usestrict';constwebpack=require('webpack');constpath=require('path');constUglifyJsPlugin=require("uglifyjs-webpack-plugin");constMiniCssExtractPlugin=require("

javascript - 未提供 Webpack gzip 压缩包,未压缩包是

我是第一次尝试Webpack。我已经将Gulp与Browserify一起使用了一段时间,并且对它非常满意。在这一点上,我只是在测试几个Webpack插件。即compression-webpack-plugin。我以前从未使用过压缩,所以如果我犯了任何菜鸟错误,请多多包涵。下面是我的webpack.config.js。结果是我得到了main.js、main.js.gz、main.css和index.html。main.js被注入(inject)到index.html中,但如果我在浏览器中打开index.html,它会提供未压缩的main.js,而不是压缩的main.js.gz。我读过我不

javascript - 如何使用 webpack 将 html、js 和 css 打包到一个 html 文件中?

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭2年前。Improvethisquestion我使用webpack构建了我的应用程序,将所有css合并到一个文件中,将所有js合并到一个文件中,并为我的SPA应用程序使用一个html。当我使用webpagetest进行测试时,我的大部分问题不是加载文件而是将它们作为单独的文件加载。html+css+js=index.html如何将我的html、css和js打包到一个index.html中,以便可以避免http开销

html - 有没有办法使用 html-webpack-plugin 包含部分内容?

我正在使用Webpack来编译我的脚本和HTML(使用html-webpack-plugin)。问题是,我有5个包含相同部分的HTML文件,我想将这些部分移动到单独的.html文件中,然后在每个HTML文件中包含这些部分。这样,如果我要更改这些较小的HTML文件,它将重新编译每个HTML文件以表示这些更改。默认情况下,Webpack会为.js文件执行此操作,但我可以对HTML文件使用类似的东西吗? 最佳答案 您可以使用在你的模板中。此处示例:https://github.com/jantimon/html-webpack-plugi