Tag: webpack 2

Webpackdynamic要求给出混合内容错误: 我正在尝试Webpack的dynamic需求，把我需要的东西变成一个dynamic的模块，然后把代码分开。 import(`resources/assets/images/svg/${this.name}.svg`).then((module) => { this.svg = module; }).catch(error => 'An error occured while loading the svg'); 当承诺触发时，代码被注入页面并带有脚本标签。脚本标记除了使用http而不是https 。混合内容：“ https://test.app ”页面通过HTTPS加载，但请求一个不安全的脚本“ http://test.app/28.js ”。此请求已被阻止; 内容必须通过HTTPS提供。我如何确保我的dynamic需求使用https 。这是我可以调整我的webpackconfiguration的设置？更新：它不是一个http或https问题，而是Webpack创build一个没有/前缀的脚本标记： <script type="text/javascript" charset="utf-8" async="" src="22.js"></script> 这导致脚本被parsing为： mywebpage.app/test/22js 虽然它实际上需要是： mywebpage.app/22.js 我不知道如何解决这个问题。

如何在ReactJs组件中调用oidc-client signinSilentCallback: 我需要使用oidc-client或者redux-oidc npm node module实现Slient-Renew令牌。我正在使用Identity Server版本3.0和Javascript ReactJs客户端UI应用程序（Webpack版本2）。我正在从github上下载一个简单的Javascript应用程序，Slient Renew HTML文件是 <!DOCTYPE html> <html> <head> <title>Silent Renew</title> <meta charset="utf-8" /> </head> <body> <script src="./oidc-client.js"></script> <script> new Oidc.UserManager().signinSilentCallback(); </script> </body> </html> 目前我创build了一个路线 <Route exact path='/SilentRenew' component={SilentRenew} /> 组件代码是 import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import UserManager from 'oidc-client'; […]

不是来自webpack的内容是从/ dist提供的: webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry:'./src/app.js', output:{ path:path.join(__dirname, 'dist'), filename:'app.bundle.js', publicPath:'/dist/' }, , devServer: { contentBase: path.join(__dirname, "dist"), compress: true, stats: "errors-only", openPage: '', port:9000, open:true }, plugins: [new HtmlWebpackPlugin({ title:'Forum', filename:'index.html' //template:'./src/app.html' })] } 我的项目结构： ├── forum │ └── dist └── app.bundle.js ├── src │ ├── app.html […]

用两个configuration创build一个webpack.config，但插件相同: 我正在开发一个基于vue.js的项目，在那里我将有一个用于pipe理仪表板的SPA和一个公共端的SPA。我想单独处理这些项目，但是同时build立它们。（或者这将是很好的东西，如：运行生成 – 公共或–admin（指定要build立哪一个））我创build了一个configuration数组，并使用此设置创build输出，但由于某种原因，它不会缩小。它只有一个configuration。我试图把插件像插件分开configuration：[..]但没有成功。 webpack.config.js： var path = require（'path'）var webpack = require（'webpack'） module.exports = [ { entry: { public : './resources/js/public-spa/main.js', }, output: { path: path.resolve(__dirname, './public/public-spa/dist/'), filename: '[name].build.js', chunkFilename: "public.[name].chunk.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } […]

如何使用webpack将jquery包含在nodejs应用程序中？: 这是我的webpack.config.js var webpack = require("webpack"); module.exports = { entry: './app.js', output: { filename: './bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } } ], }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }; 这是我的app.js var $ = require('jquery'); global.jQuery = $; global.$ = […]

使用Webpack，Node，Express，React，React-Router时的文件大小: Webpack捆绑一个文件到一个简单的服务器为1.34mb的大小。对我来说，考虑到服务器的有限性，似乎是不必要的大。我知道，使用快递，反应，反应路由器等将气球的文件，但对我来说，这似乎是巨大的！首先，我想知道我是否正确使用webpack？其次，我应该从哪里开始缩小呢？ server.js var express = require('express') var path = require('path') import React from 'react' import { match, RouterContext } from 'react-router' import { renderToString } from 'react-dom/server' import routes from './src/routes/routes' var app = express() app.use(express.static(path.join(__dirname, 'public'))) app.use(function(rq, rs, nx){ console.log("rq.url: ", rq.url) nx() }) app.get('*', function(req, res){ match({ routes: routes, […]

Webpack正在压缩我的整个项目，而不是捆绑js: 每当我运行webpack时，它会在项目的根目录下创build一个.tgz文件，而不是创build一个可以包含在html中的bundle.js文件。这是我的webpackconfiguration： const path = require('path') module.exports = { context: __dirname, entry: './client/index.js', output: { path: path.resolve('dist'), filename: 'index_bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ } ] } } 我的项目结构看起来像这样 babel.rc dist node_modules webpack.config.js client – index.html – index.js jslib-1.0.0.tgz < […]

Webpack在构build时使用节点“fs”模块，以便浏览器获取函数的结果: 问题：是否有办法告诉webpack在构build期间告诉内置模块（如fs）执行，以便浏览器获取此函数的结果，而不是函数调用本身？我的情况：目前我正在开发一个使用webpack浏览器的应用程序。我试图在我的文件中使用节点'fs'模块来从其他目录需要index.js文件。例如： plugins ├──plugin1 │ ├── index.js (simply exports an object) │ ├──plugin2 │ ├── index.js (simply exports an object) | ├──plugin3 │ ├── index.js (simply exports an object) | |──index.js (want to require all index.js from each plugin directory here) 我得到一个webpack的错误说： Can't resolve 'fs' in somepath/node_modules/require-dir 我的文件index.js位于`plugins / index.js'这只是试图要求我的其他文件。 […]

Webpack软件包ENOENT：没有这样的文件或目录fs.readdirSync: 我们希望创build在AWS Lambda上运行的微型应用程序。我们正在为此调查webpack 2。但是，我们使用fs.readdirSync遗留代码来获取文件/模块名称的列表以生成模块列表。当执行包时，我们得到一个错误Error: ENOENT: no such file or directory, scandir '/innerLib'因为webpack不知道执行fs.readdirSync(path.resolve(__dirname, 'innerLib')); 在文件lib/lib.js并在捆绑时间内parsing文件名的数组。我们可以采用wepback，而不对遗留代码进行重大更改。我在下面和github上包含了一个简单的例子 webpack.config.js var path = require( 'path' ); var webpack = require( 'webpack' ); module.exports = { context: __dirname, entry: ['./index.js'], output: { filename: 'bundle.js', }, target: 'node', } index.js const lib = require('./lib/lib.js'); lib.getModuleList((err, modules) => console.log(modules)); […]

Webpack2 Hot Module重新加载Express.js Universal React应用程序: 通用应用程序的webpackconfiguration通常是一个configuration对象的数组，如： module.exports = [ { name: 'client', entry: { app: […require("./loaders").hotLoaders, "./src/frontend/client"], libs: [ 'react', 'react-dom' ] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" }, … }, { name: 'server', target: 'node', entry: { server: ["./src/universal/server"], express: ["./src/universal/express"] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" } … }]; 在运行webpack –config build/webpack/prod.js ，我可以在生产环境中执行以下操作，只需运行server.express块的输出，如node www/express.bundle.js […]