Articles of webpack dev server

如何在webpack中使用noParse?

我想从我的webpack文件中排除这个,通过使用下面这个给我的代码行。 noParse: /node_modules\/localforage\/dist\/localforage.js/, 但是无论我尝试什么,我都会一直说错误 ReferenceError:C:/…./ node_modules \ localforage \ .babelrc中指定的未知插件“add-module-exports” 这是我的webpackconfiguration文件: var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './app/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index_bundle.js', publicPath: '/' }, devServer: { historyApiFallback: true, }, module: { rules: [ { test: /\.(js)$/, use: 'babel-loader' }, { test: /\.css$/, use: [ 'style-loader', […]

如何使webpack dev服务器访问公开?

https://github.com/nttcom/SkyWay-MultiParty我testing了这个api在本地运行webpack dev服务器 这是成功,但我想访问其他电脑或智能手机 我能做什么? 我第一次看到webpack代码 的package.json { "name": "skyway-multiparty", "version": "1.0.4", "description": "SkyWay js library for multi party apps", "homepage": "https://github.com/nttcom/SkyWay-MultiParty", "repository": { "type": "git", "url": "git://github.com/nttcom/SkyWay-MultiParty.git" }, "main": "lib/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack-dev-server": "webpack-dev-server –host 172.19.1.200 –port 8081 –open –https –content-base ./" }, webpack.config.js const webpack […]

Webpack-dev-server找不到要提交的文件

我只是从webpack文档复制粘贴webpack-dev-server + express设置,但是它不起作用,因为服务器找不到要提供的文件。 这个设置有什么问题? server.js const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const config = require('../webpack.config.js'); const compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); /*app.use('/',express.static('public')) it works when used insted of webpack dev middleware */ // Serve the files on port 3000. app.listen(3000, function () […]

不是来自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 […]

无法在AWS EC2的公共IP上使用webpackdevserver托pipe反应应用程序

我正在运行AWS EC2上的react应用程序,它通过localhost:3000访问时在本地工作 我想让它公共访问,所以我通过公共ip到以下命令 var webpackDevServer = new WebpackDevServer(bundler, { publicPath: '/', hot: false, quiet: false, noInfo: true, stats: { colors: true } }); webpackDevServer.listen(3000, '18.230.124.435', function () { console.log('Bundling project, please wait…'); }); 我正在使用gulp来运行任务。 我geting一个错误错误:听EADDRNOTAVAIL 18.230.124.435:3000 我在这里做错了什么?

一个运行Vue前端和微服务的npm包

我的计划是将微服务和Web应用程序部署到zeit now服务器,以便Web应用程序可以对微服务服务器端进行/ api调用。 问题是,我不知道如何将两个命令合并到我的package.json文件的npm脚本对象中。 目前我只有两个目录,都有自己的package.json文件,微服务只是一个index.js,使用一个简单的微服务,使用micro和package.json文件来运行它。 然后,我的Vueconfiguration代理请求/ api到本地运行的微服务端口。 我的configuration如下。 我正在使用webpack高级vuejs模板。 这是否可以在一个包中进行部署和构build? 我正在使用微服务来进行authentication的API调用,就像你分割它的任何方式一样,如果它们被存储在前端项目中,键将被显示,这就是为什么我select使用只服务器端的微服务。 在我的config/index.js dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite:{ "^/api": "" } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to […]

将Webpack添加到现有的React应用程序

所以我使用create-react-app构build了第一个应用create-react-app 。 它默认使用npmbuild设,本地运行等… 我想要做的是转移到使用Webpack,但不打破现有的设置,并做了一些谷歌search,但没有开始,一步一步地走,所以我可以更好地感受它正在做什么,去哪里。 也希望也使用webpack-dev-server合并。 这就是说,我希望你们有一些build议,也许还指出了一些很好的教程,为这个前进? 非常感谢。

Webpack不会重新加载页面

npm run dev工作正常,但它不会重新加载页面进行更改时。 我也尝试使用localhost:8080/webpack-dev-server/index.html并且页面不再刷新。 我完全是NodeJS的新手,完全不知道如何解决这个问题。 我花了几个小时尝试不同的事情,因为这很困难,我差点stream泪。 文件夹结构: Project – node_modules – src – js – components – pages – client.min.js – index.html – package.json – package-lock.json – webpack.config.js 的package.json: { "name": "react-tutorials", "version": "0.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.0", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": […]

Webpack-dev-server找不到模块

欢迎, 我是React和Node.js的新手。 我想学习一些关于React的知识,并最终与Node.js一起苦苦挣扎。 问题是我无法正确设置Web开发服务器。 对不起,如果这个问题似乎trival虽然我还没有find一个小时的解决scheme。 这里是: webpack.config.js module.exports = { entry: './src/index.js', output: { path: __dirname, filename: 'app/js/main.js' }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ }] } } 的package.json { "name": "Github_profile_viewer", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": […]

在更改根目录名称后,Webpack dev服务器不会监视文件

我最近更改了我的根目录(package.json和webpack.config.js)的名称,现在webpack-dev-server在更改我的文件时不会更新。 这是我的webpackconfiguration: var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "./js/init.js", module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ] }, […]