jjzjj

webpack-plugin

全部标签

javascript - webpack watch 编译每个文件

根据webpackdocumentationforwatcheswebpackcanwatchfilesandrecompilewhenevertheychange.在我看来,这意味着webpack只会编译更改的文件。我有一个webpack.config.js看起来像这样module.exports={watch:true,watchOptions:{ignored:/node_modules/,},entry:{"first":'./web/assets/js/first.tsx',"second":'./web/assets/js/second.tsx',},//otherstuf

javascript - Webpack - MiniCssExtractPlugin 不提取文件

我已经为我的VueJS项目创建了webpack配置。我想将样式与javascript代码分开。我使用了mini-css-extract-plugin但最后我只收到bundle.js文件。这个配置有什么问题,错误在哪里?有没有遗漏的装载机。我的配置如下:importpathfrom'path';importOptimizeCssAssetsPluginfrom'optimize-css-assets-webpack-plugin';importMiniCssExtractPluginfrom'mini-css-extract-plugin';importVueLoaderPluginfr

javascript - Webpack 4 拆分块术语

我理解在webpack4上所做的伟大工作。特别是重写代码拆分插件。然而,由于它仍然有点新,我没有找到关于新SplitChunksPlugin的好文档。我对所选术语的含义感到困惑。例如:chunks:有3个可能的值“initial”、“async”和“all”。这是什么意思?初始block是条目?异步动态导入?都是初始+异步?如果我使用initial那么我的动态导入block将不会利用代码拆分?例如。main.tsx动态导入about.tsx,它正常导入lodash。Lodash不会被提取到vendor包中?enforce:我看到很多配置都设置了enforce:true,这是什么意思?为

javascript - babel-preset-env 不使用 webpack 转译箭头函数

我正在将babel与webpack结合使用,我试图让箭头函数与InternetExplorer一起工作,但我无法让它工作。这是我的package.json开发依赖项:"devDependencies":{"babel-core":"^6.26.3","babel-loader":"^7.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","webpack":"^3.12.0","webpack-cli":"^3.1.0"}这是我的webpack.config.js:mo

javascript - copy-webpack-plugin 不复制文件

我尝试只复制文件来检查简单的webpack配置。所以我一直在尝试让copy-webpack-plugin工作——没有任何反应:没有复制的文件,没有错误,什么都没有常用配置(webpack.common.js):constpath=require('path');constCopyWebpackPlugin=require('copy-webpack-plugin');constpostCssPlugin=[require('postcss-import'),require('postcss-nested'),require('postcss-simple-vars'),require(

javascript - 如何在没有 bundler 的情况下使用 Babel,但具有类似于 webpack 的开发体验?

我正在尝试使用ES6modules构建一个新项目没有捆绑。我还是想用babel-7将TypeScript和JSX翻译成JS。我发现很难弄清楚如何为它设置开发服务器。我找不到任何类似于webpack-dev-server的“babel-dev-server”(热模块重新加载、浏览器同步、文件观察器)。一种可能是使用browsersync作为静态服务器,例如dist并并行运行类似babelsrc--out-dirdist--watch的东西。但这不包括热重载,对我来说似乎有点笨拙。此外,如果您可以为JS文件提供哈希以更好地控制缓存,那么它对于构建和开发步骤仍然有用。或者我可以配置像webp

javascript - 如何设置 VSCode 来调试 webpack 捆绑的 nodejs 服务器

我有一个nodejsexpress应用程序,我试图将其与webpack4(加上babel7.1.0)捆绑在一起。我遵循了这两篇文章中的一些设置:WebpackJavascriptBundlingforBothFront-endandBack-end(nodejs)CreatingaserverbundlewithWebpackforuniversalrendering我可以在捆绑后构建和运行服务器,但我希望能够使用VSCode的调试环境对其进行调试。我尝试了以下webpack和vscode配置的组合,但它没有设置断点或让我进入代码。.vscode/launch.json{"type":

javascript - 使用 WebPack,我如何创建准备好使用 "split" bundle ,其中一个依赖于另一个?

我的问题非常接近others我相信的答案仍然需要我想避免的另一个WebPack步骤。但首先是故事:我有一个Node模块(我们称之为libfoo),它提供了一些功能并需要一些第三方模块,和一个小脚本main.js,它提供主要入口点并需要libfoo:ma​​in.js:constfoo=require('foo');functionmain(){foo.bar();}main();我现在想使用WebPack将libfoo和main.js转换为浏览器可执行文件可交付成果。我希望libfoo(相当大)静态驻留在目标系统上,而main.js非常小并且变化很快(试想一个测试场景,其中libfoo

javascript - 如何在 webpack hook 中打破循环

我正在处理一个nuxt.js项目,我需要在每个更改的文件(即每个webpack构建)上运行一个shell脚本。所以我正在使用WebpackHooks我创建了我的WebpackPlugin/plugins/NamedExports.jsconstpluginName='NamedExports'const{exec}=require('child_process')classNamedExports{apply(compiler){compiler.hooks.beforeCompile.tap(pluginName,(params,callback)=>{exec('shplugins

javascript - jQuery Plugin - 深度选项修改

我目前正在使用一个设置变量相当深的插件(某些地方有3-4个级别)。按照普遍接受的jQuery插件模式,我实现了一种简单的方法,供用户使用以下符号即时修改设置:$('#element').plugin('option','option_name','new_value');这是与我现在用于选项方法的代码类似的代码。option:function(option,value){if(typeof(option)==='string'){if(value===undefined)returnsettings[option];if(typeof(value)==='object')$.exten