所以基本上我有一个使用Webpack的项目,如果我构建使用Webpack -w,用另一个编辑器编辑文件将触发手表; 但是,如果我使用Webstorm编辑文件,则不会发生任何事情.
我遇到过这篇文章,似乎我不是唯一一个,但是这个解决方案适用于Ubuntu,所以我想知道Windows是否有类似的东西？
谢谢
我正在使用webpack使用以下配置成功运行我的反应前端:
{
name: 'client',
entry: './scripts/main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['es2015', 'react', 'stage-2']
}
}
]
}
}
我也试图建立一个node.js表达后端,并希望通过webpack运行,所以我有一个服务器同时运行后端和前端,因为我想使用babel来传输我的javascript.
我做了一个快速测试服务器,看起来像这样:
var express = require('express');
console.log('test');
var app = express();
app.get('/', function(req, res){
res.send("Hello world from Express!!");
});
app.listen(3000, function(){
console.log('Example app listening on port 3000');
});
如果我运行它node index.js并打开我的浏览器,localhost:3000它会打印出"Hello Express from Express !!".到现在为止还挺好.然后我尝试为它创建一个web-pack配置:
var fs = require('fs');
var nodeModules = {}; …我正在尝试在一个项目中做一些事情,我不确定它是否可能,我是错误的方式或误解了什么.我们正在使用webpack,其想法是提供多个html文件.
localhost:8181 - >提供index.html
localhost:8181/example.html - > serve example.html
我正在尝试通过设置多个入口点,遵循文档:
文件夹结构是:
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.js:
...
entry: {
main: './js/main.js',
exampleEntry: './js/example.js'
},
output: {
path: path.resolve(__dirname, 'build', 'target'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].bundle_[chunkhash].js',
sourceMapFilename: '[file].map'
},
...
的index.html
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
<div id="container"></div>
<script src="/main.bundle.js"></script>
</body>
</html>
example.html的:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css"> …我从项目的根文件夹运行webpack-dev-server.我在/ src/assets中有一个由CopyWebPackPlugin复制的资源文件夹:
new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])
如果我将logo.png放在assets文件夹中,那么在运行webpack-dev-server后我无法访问http://localhost/assets/logo.png文件,但可以访问http:// localhost/src/assets/logo. png文件.但是,如果我在生产模式下运行,情况会颠倒过来.
如何配置webpack服务器以使http://localhost/assets/logo.png文件在开发模式下可访问？
目前正在通过一些教程学习 Vue js 和 express js，我对这些技术仍然是新手。
无论如何，按照教程，我正在构建一个小项目，其中我有一个文件夹“Client”，其中包含项目的前端和另一个包含后端的文件夹“Server”。
就在向 Github 推送提交之前，一切都很好，但是一旦我做了 Github 就发出了一些漏洞信号，并且在修复它们之后 npm run dev 不再起作用。
尝试了多种解决方案但没有任何效果，重新安装可疑模块，在运行npm cache clean --force后重新安装节点模块
这是我得到的错误
npm run dev
> client@1.0.0 dev D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88
throw new _ValidationError.default(errors, schema, configuration);
^
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- options[0] misses the property 'patterns'. Should be:
[non-empty string | …我正在使用webpack-dev-server进行开发,使用html-webpack-plugin生成带有修订源的index.html.问题是每次我更改index.html时,bundle系统都不会再次重建.我知道索引不在条目中,但有没有办法解决这个问题？
出于安全原因，“Github”要求我将“webpack-dev-server”更新到 3.1.11 或更高版本。
但是，'npm run dev' 不会在更新后运行。
我不解决这个问题
错误：找不到模块“webpack-cli/bin/config-yargs”
“package.json”的代码如下。
"dependencies": {
"@vue/cli-plugin-babel": "^3.5.1",
"config": "^3.0.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
当我在webpack-dev-server运行时更改文件时,不会更新软件包的文件.这是我的webpack.config.js和package.json文件,你可以从我的npm脚本中看到,我已经解决了运行webpack watch并webpack-dev-server在同一个命令(npm run watch & webpack-dev-server --content-base ./ --port 9966)中:
webpack.config.js:
'use strict';
var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
devtool: 'sourcemap',
entry: ['./js/main.js'],
output: {
filename: 'bundle.js',
path: __dirname + '/assets',
publicPath: __dirname + '/'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [
ReactStylePlugin.loader(),
'jsx-loader?harmony'
]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}
]
},
plugins: [
new ReactStylePlugin('bundle.css'),
new webpack.DefinePlugin({
'process.env': { …我使用babel-loader,但无法弄清楚如何生成或找到转换文件的源映射.我试过eval-source-map,inline-source-map,source-map.
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js',
sourceMapFilename: "bundle.js.map",
publicPath: 'http://localhost:8090/assets'
},
debug: true,
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'jsx', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
},
{
test: /\.less$/,
loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
},
{
test: /\.css$/,
loaders: [ 'style', 'css']
},
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, …我正在按照一些教程来构建一个具有表达和反应的同构应用程序.我对webpack-dev-server感到困惑.
webpack教程讲述了webpack-dev-server:
这将绑定localhost:8080上的一个小型快速服务器,它为您的静态资产和捆绑包(自动编译)提供服务.
它在重新编译包时自动更新浏览器页面(socket.io).在浏览器中打开http:// localhost:8080/webpack-dev-server/bundle.
既然我有快递服务器,我真的需要webpack-dev-server吗？或者使用它的优点和缺点是什么？如果我想使用react-hot-loader,那么webpack-dev-server是否必要？