我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:
import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';
export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;
所以我可以很好地从其他地方导入它,如下所示:
import { Comp1, Comp2, Comp3 } from './components';
显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.
我试图自动化资产进入/ dist.我有以下config.js:
module.exports = {
context: __dirname + "/lib",
entry: {
main: [
"./baa.ts"
]
},
output: {
path: __dirname + "/dist",
filename: "foo.js"
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
}
}
我还想在运行webpack时将/ lib中的main.html包含在/ lib文件夹中的/ dist文件夹中.我怎样才能做到这一点？
我现在最喜欢的方法是使用html-webpack-plugin带有模板文件.感谢接受的答案!这种方式的优点是索引文件也将添加开箱即用的cachbusted js链接!
我是整个nodejs/reactjs世界的新手,所以如果我的qs听起来很傻就道歉.所以我在这里玩这个reactjs应用程序:https://github.com/bebraw/reactabular
每当我执行"npm start"时,它总是运行在localhost:8080上
如何将其更改为在0.0.0.0:8080上运行以使其可公开访问？我一直在尝试阅读上面的repo中的源代码,但未能找到执行此设置的文件.
另外要添加 - 如果可能的话,如何使它在端口80上运行？
谢谢.
我正在尝试做一些我认为应该可行的事情,但我真的无法理解如何从webpack文档中做到这一点.
我正在编写一个包含多个模块的JavaScript库,这些模块可能相互依赖或不相互依赖.最重要的是,jQuery被所有模块使用,其中一些可能需要jQuery插件.然后,该库将用于几个可能需要部分或全部模块的不同网站.
定义我的模块之间的依赖关系非常简单,但定义他们的第三方依赖关系似乎比我预期的更难.
我想要实现的目标:对于每个应用程序,我希望有两个捆绑文件,一个包含必要的第三方依赖项,另一个包含我库中的必要模块.
示例:假设我的库具有以下模块:
我有一个应用程序(将其视为唯一的条目文件),需要模块a,b和c.此案例的Webpack应生成以下文件:
最后,我更喜欢将jQuery作为全局文件,因此我不需要在每个文件上都需要它(例如,我只需要在主文件上使用它).并且jQuery插件只是在需要时扩展$ global(如果它们可用于不需要它们的其他模块则不是问题).
假设这是可能的,那么这个案例的webpack配置文件的例子是什么？我在我的配置文件上尝试了几种加载器,外部和插件的组合,但我并没有真正了解他们正在做什么以及我应该使用哪些.谢谢!
我试图在我的项目中运行一些ES6代码,但我收到意外的令牌导出错误.
export class MyClass {
constructor() {
console.log("es6");
}
}
我仍然很困惑如何使用webpack解析模块路径.现在我写道:
myfile = require('../../mydir/myfile.js')
但我想写
myfile = require('mydir/myfile.js')
我认为resolve.alias可能有所帮助,因为我看到一个类似的例子使用{ xyz: "/some/dir" }别名然后我可以require("xyz/file.js").
但是,如果我设置别名{ mydir: '/absolute/path/mydir' },require('mydir/myfile.js') 将无法正常工作.
我觉得自己很愚蠢,因为我多次读过这些文档而且我觉得我错过了一些东西.什么是避免用../../等等写出所有相对要求的正确方法？
我在我的项目中添加了一个新的npm包,并在我的一个模块中需要它.
现在我从webpack收到此消息,
build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".
这是什么意思？我需要采取一些行动吗？
我看到人们使用gulp和webpack.但后来我读到webpack可以取代gulp？我在这里完全糊涂了......有人可以解释一下吗？
UPDATE
最后我开始喝了一口气.我是现代前端的新手,只是想快速起步和跑步.现在,经过一年多的时间,我的脚已经湿透了,我已准备好转向webpack了.对于那些以同样的鞋子开始的人,我建议采用相同的方法.不是说你不能尝试webpack而只是说如果它看起来很复杂,那么先从gulp开始......没有错.
如果你不想要gulp,是的,那就是grunt,但是你也可以在package.json中指定命令,并从命令行调用它们而不需要任务运行器来启动和运行.例如:
"scripts": {
"babel": "babel src -d build",
"browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js",
"build": "npm run clean && npm run babel && npm run prepare && npm run browserify",
"clean": "rm -rf build && rm -rf dist",
"copy:server": "cp build/server.js dist/server.js",
"copy:index": "cp src/client/index.html dist/client/index.html",
"copy": "npm run copy:server && npm run copy:index",
"prepare": "mkdir -p dist/client/scripts/ && npm run copy",
"start": "node dist/server"
},
有谁知道如何在webpack.config.js文件中创建多个输出路径？我正在使用bootstrap-sass,它带有一些不同的字体文件等.对于webpack来处理这些我已经包含的文件加载器,它正常工作,但它输出的文件被保存到我指定的输出路径其余的文件:
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
}
我希望能够实现一些东西,我可以查看任何webpack输出的扩展类型以及以.woff .eot等结尾的内容,将它们转移到不同的输出路径.这可能吗？
我做了一些谷歌搜索,并在github上遇到了这个问题,提供了几个解决方案,编辑:
但看起来你需要知道能够使用哈希方法指定输出的入口点,例如:
var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
entry : {
a: entryPointsPathPrefix + '/a.jsx',
b: entryPointsPathPrefix + '/b.jsx',
c: entryPointsPathPrefix + '/c.jsx',
d: entryPointsPathPrefix + '/d.jsx'
},
// send to distribution
output: {
path: './dist/js',
filename: '[name].js'
}
}
*https://github.com/webpack/webpack/issues/1189
但就我而言,就字体文件而言,输入过程是抽象的,我所知道的就是输出.在我的其他文件正在进行转换的情况下,有一个已知点,我要求它们然后由我的加载器处理.如果有办法找出这一步发生的地方,我可以使用哈希方法来自定义输出路径,但我不知道这些文件的位置.
我刚刚开始使用webpack,并且很难获得多入口点样本.示例中的webpack.config.js文件包含该行
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
这个错误让我失败了
Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin'
在搜索时,我发现了使用CommonsChunkPlugin和表达式的其他示例
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
因错误而失败
ReferenceError: webpack is not defined
一些更多的搜索发现了一些例子,包括
var webpack = require('webpack');
而我的构建现在失败了
Error: Cannot find module 'webpack'
我不知道如何继续.