Tag: Webpack

我怎样才能在webpack.config.js中使用ES6？: 如何在webpack.config中使用ES6？像这个回购https://github.com/kriasoft/react-starter-kit呢？例如：使用这个 import webpack from 'webpack'; 代替 var webpack = require('webpack'); 这是一个好奇心，而不是一个需要。

如何分开捆绑供应商脚本，并根据需要使用Webpack？: 我试图做一些我认为应该可能的事情，但是我真的不明白如何从webpack文档（在我看来这是一个解密和理解的地狱）中做到这一点。我正在编写一个JavaScript库，其中有几个模块可能不相互依赖。最重要的是，jQuery被所有模块使用，其中一些可能需要jQuery插件。这个图书馆将被用于几个不同的网站，这可能需要一些或所有的模块。定义我的模块之间的依赖关系非常简单，但是定义他们的第三方依赖关系似乎比我想象的要困难得多。我想达到什么目的：对于每个网站，我想有两个捆绑文件，其中一个具有必要的第三方依赖关系，另一个具有来自我的库的必要模块。示例：让我们想象一下，我的库有以下模块：一个（需要：jquery，jquery.plugin1） b（需要：jquery，a） c（需要：jquery，jquery.ui，a，b） d（需要：jquery，jquery.plugin2，a）我有一个网站（见它作为一个独特的入口文件），需要模块a，b和c。这种情况下的Webpack应该生成以下文件：供应商捆绑：与jquery，jquery.plugin1和jquery.ui; 网站包：模块a，b和c; 最后，我宁愿将jQuery作为一个全局的，所以我不需要在每个单独的文件（例如，我可能只需要在主文件，例如）要求它。而且jQuery插件只会扩展$ global，以防需要它们（如果其他模块不需要这些模块，则不会有问题）。假设这是可能的，这种情况下的webpackconfiguration文件的例子是什么？我在configuration文件上尝试了几个加载器，外部和插件的组合，但是我并没有真正明白他们在做什么，应该使用哪些。谢谢！

什么是Webpack中的热模块更换？: 我已经阅读了关于Webpack中热模块replace的几页。甚至有一个使用它的示例应用程序。我已阅读所有这一切，但仍然不明白。我能用它做什么？它应该只用于开发而不是用于生产？它是否像LiveReload，但你必须自己pipe理它？ WebpackDevServer以某种方式与它集成吗？假设我想将我的CSS（一个样式表）和JS模块更新到磁盘上，而无需重新加载页面，也不需要使用LiveReload等插件。这是什么热模块更换可以帮助我？我需要做什么样的工作，HMR已经提供了什么？

SystemJS和Webpack有什么区别？: 我正在创build我的第一个Angular 2应用程序，我想知道模块加载器的作用。为什么我们需要他们？我试图search和search谷歌，我不明白为什么我们需要安装其中的一个来运行我们的应用程序？仅仅使用import来加载节点模块的东西是不够的？我遵循这个教程（使用SystemJS），它使我使用systemjs.config.js文件： /** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'transpiled', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells […]

webpack中的“publicPath”是做什么的？: Webpack文档声明output.publicPath是：来自JavaScript视图的output.path。请您详细说明这实际上是什么意思？我使用output.path和output.filename来指定webpack应该输出结果的位置，但我不知道要在output.publicPath放置什么以及是否需要。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }

如何使用webpack构build缩小的和未压缩的包？: 这是我的webpack.config.js var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename: "bundle.min.js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({minimize: true}) ] }; 我正在build设 $ webpack 在我的dist文件夹中，我只能得到 bundle.min.js bundle.min.js.map 我也想看到未压缩的bundle.js

Webpack babel 6 ES6装饰器: 我有一个使用webpack作为我的捆绑软件在ES6中编写的项目。大部分的编译工作正常，但是当我尝试在任何地方包含装饰器时，我得到这个错误： Decorators are not supported yet in 6.x pending proposal update. 我查看了babel的问题跟踪器，并没有find任何东西，所以我假设我用错了。我的webpackconfiguration（相关位）： loaders: [ { loader: 'babel', exclude: /node_modules/, include: path.join(__dirname, 'src'), test: /\.jsx?$/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0', 'react'] } } ] 我没有任何其他问题，箭头function，解构所有工作正常，这是唯一不起作用。我知道我总是可以降级到babel 5.8，但是如果有什么方法可以在当前版本（v6.2.0）中使用，它将会有所帮助。

如何在使用babel和webpack时生成源映射？: 我是新来的webpack，我需要一手设置生成源代码。我webpack serve运行webpack serve ，编译成功。但我真的需要源代码。这是我的webpack.config.js 。 var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { colors: true, reasons: true }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'styles': __dirname + '/src/styles', 'mixins': __dirname + […]

Webpack ProvidePlugin vs外部？: 我正在探索与Backbone.js一起使用Webpack的想法。我已经按照快速入门指南，并有一个Webpack如何工作的一般想法，但我不清楚如何加载依赖库，如jQuery / backbone / underscore。他们应该用<script>外部加载，还是Webpack可以像RequireJS的Shim那样处理？根据webpack文档：shimming模块， ProvidePlugin和externals似乎与此有关（在某些地方也是这样的bundle! loader），但我不知道何时使用哪个。谢谢

dynamic添加图像React Webpack: 我一直想弄清楚如何通过React和Webpackdynamic添加图片。我在src / images下有一个image文件夹，在src / components / index下有一个组件。我正在使用url-loader和下面的webpackconfiguration { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 在组件中，我知道我可以添加要求（image_path）在文件顶部的特定图像在我创build组件之前，但我想使组件通用，并使其传递的图像的path父组件。我所尝试的是： <img src={require(this.props.img)} /> 对于实际的属性，我尝试了几乎所有可以从项目根目录，响应应用程序根目录以及组件本身获取的图像的path。文件系统 |– src | ` app.js | `–images | ` image.jpg | ` image.jpg | `– components | `parent_component.js | `child_component.js 父组件基本上只是容纳多个孩子的容器，所以… <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc…. 有没有什么办法做到这一点使用反应和webpack与url-loader或我只是走错了path来接近呢？