【关于webpack2和模块打包的新手指南(小结)】教程文章相关的互联网学习教程文章

javascript – 从块webpack 4中排除某个模块【代码】

我怎么能指定我不想在webpack 4的块中使用模块,假设我不想在供应商文件中使用lodash(无论后果如何),我该怎么办? 这是实际配置:splitChunks: {name: 'vendors',maxAsyncRequests: 1,maxInitialRequests: 2,chunks: 'initial', }解决方法:您可以通过更新test属性从node_modules中排除特定文件夹.在下面的示例中,我们创建了一个包含所有供应商的块,但Lodash模块除外. webpack.config.jsmodule.exports = {//...optimization: {split...

javascript – Webpack babel-loader运行时:模块构建失败: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' plugin tells babel to require the runtime// instead of inlining it.{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {pres...

javascript – 任何Node.js HTTP请求模块,当与Webpack捆绑在服务器和浏览器中时都能工作?

当与Webpack捆绑在一起时,我需要一个在Node.js服务器和客户端都能工作的请求模块. 我的要求非常基本.我只需要做一些HTTP Ajax请求,比如get和post.自动JSON解析会很棒. 我正在看看Request,这似乎是提交和下载的数量,但网站没有提到它是否在浏览器中捆绑时有效. 有什么建议吗?解决方法:我用axios 基于Promise的HTTP客户端,用于浏览器和node.js 特征 >从浏览器生成XMLHttpRequests>从node.js发出http请求>支持Promise API>拦截请求和...

javascript – Eslint throws被分配了一个但从未使用过的webpack模块【代码】

我正在webpack中导入一个脚本,它一切正常,但是eslint正在抛出错误’模态被分配了一个值,但从未使用过’.是否必须将const声明为全局或导出模块以修复错误? modules.vanillaModal.js:import VanillaModal from 'vanilla-modal';// Create instance const modal = new VanillaModal({modal: '.c-modal',modalInner: '.js-modal__inner',modalContent: '.js-modal__content',open: '[rel="js-modal:open"]',close: '[rel="js-modal:c...

javascript – 如何使用webpack在React应用程序中异步需要模块?【代码】

在React应用程序中,我想只为某个路径/路径导入一个名为flowtime.js的库,然后再执行一些代码.该库有一个名为Brav1toolbox的依赖项.在npm上都没有. 我的策略是在Component的componentDidMount方法中使用webpack的require.这是我的尝试:componentDidMount() {require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) {var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js');...

javascript – 使用没有Webpack的模块“child_process”【代码】

我正在使用Webpack捆绑依赖项,其中一个是电子邮件服务邮戳.这项服务依赖于一个名为child_process的东西,它显然随节点一起提供. 问题是,当我尝试运行webpack捆绑我的应用程序时,它会抱怨:Module not found: Error: Cannot resolve module ‘child_process’ in …网上的大多数答案都说,为了回应这个错误,我应该添加以下内容:node: {child_process: 'empty'}到我的webpack配置.但这没有任何意义,因为然后webpack不会尝试寻找child_...

javascript – 如何在reactjs中解决’找不到模块’webpack-cli / bin / config-yargs’错误?【代码】

当我运行我的第一个hello world反应示例时,我收到以下错误.我该如何解决这个问题?Error: Cannot find module 'webpack-cli/bin/config-yargs'at Function.Module._resolveFilename (module.js:547:15)at Function.Module._load (module.js:474:25)at Module.require (module.js:596:17)at require (internal/module.js:11:18)at Object.<anonymous> (.\ReactJS\node_modules\webpack-dev-server\bin\webpack-dev-server. js:65:1)...

javascript – 如何使用webpack插件动态添加模块/依赖项?【代码】

我觉得我想要实现的并不是那么难……但是webpack文档处于严重的混乱状态,而且我在这方面花了很多时间. 我如何将“动态”模块注入到webpack构建中?我想在构建时创建这个模块. 举个简单的例子,如何在构建时将此字符串作为新模块注入?"module.exports = new Date();"然后让我说我希望该模块的名称为“myDate” 我非常希望我的应用程序中的任何其他模块能够解决它:var myDate = require('myDate');现在这是一个非常简单的例子.我的目...

javascript – 使用Ionic和Webpack导入ngstorage时无法解析模块’angular’【代码】

我正在使用Ionic与Webpack和Typescript实现一个应用程序.我通过npm安装’ngstorage’并尝试导入条目ts文件,但Webpack显示错误 – ‘无法解析模块’angular”. 我搜索了这个错误并意识到我需要在package.json文件和node_modules中包含angular.但是,ionic-sdk模块已经包含了角度.所以它反而在浏览器中显示一个不可接受的错误,我试图多次加载角度. Webpack是否有办法跳过模块解析器或指向角度模块到ionic-sdk模块的路径?或者有其他建...

javascript – 在Webpack中的/ node_modules / watchpack中获取“无法解析模块’aws-sdk’,’child_process’,’net’”【代码】

我正在尝试构建我的prod webpack文件并获得5-10个“无法解析模块”的错误aws-sdk,child_process“. 所有这些错误都以相同的路径开始:“(webpack)/?/ watchpack /?/ chokidar /?/ fsevents /”中的错误 例如: ERROR in(webpack)/?/ watchpack /?/ chokidar /?/ fsvents /?/ node-pre-ygyp / lib / node-pre -gyp.js找不到模块:错误:无法解析’文件’或’目录’../package 错误(webpack)/~/watchpack/~/chokidar/~/fsevents/~/no...

javascript – Webpack和AWS Lambda问题 – 模块上缺少处理程序【代码】

我正在使用ES6,babel和Webpack 2捆绑AWS Lambda.然后我使用AWS SAM本地运行/测试它.当我点击api时出现以下错误 – Handler 'handler' missing on module 'dist/main'这是我的webpack.config.js – const path = require('path');module.exports = {entry: './index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',libraryTarget: 'commonjs'},module: {rules: [{test: /\.js$/,exclude: /node_modules/...

单步调试理解webpack里通过require加载nodejs原生模块实现原理【图】

在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。 原生模块的加载,比如: const path = require(“path”); 这个语句是webpack和nodejs应用里经常使用到的。今天就来谈谈它的实现原理。 还是通过单步调试的方式来学习。 大家首先得通过我前一篇文章?webpack打包过程如何调试?学会如何调试webpack打包过程。 require函数的实现位于file:///internal/module.js注意看第10行和第13行的requireD...

模块化打包工具webpack

webpack配置文件 先看一下webpack的配置文件,刚开始学的时候有点难,配置文件能够完全看懂,说明入门了// 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: __dirname + "/app/main.js", //唯一入口文件output: {path: __dirname + "/build",filename: ...