Articles of 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上运行的微型应用程序。 我们正在为此调查web​​pack 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 […]