Tag: Webpack

如何使用多个加载器将查询添加到webpack加载器？: 我有这个巴贝尔装载机正在工作 { test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ }, 但现在我想要一个CoffeeScript加载程序，但是我想通过Babelpipe道来获取HMR的东西 { test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ }, 这虽然不起作用，并导致以下错误。错误：无法在加载器列表中定义“查询”和多个加载器任何想法如何定义加载器链的Babel部分的查询？查询是一个复杂的对象，我不认为我可以编码它。 var babelSettings = { stage: 0 }; if (process.env.NODE_ENV !== 'production') { babelSettings.plugins = ['react-transform']; babelSettings.extra = { 'react-transform': { transforms: [{ transform: 'react-transform-hmr', imports: ['react'], locals: ['module'] }, […]

分配左侧的Javascript对象括号表示法（{导航} =）: 我以前没有看过这个语法，所以想知道这是什么意思。左边的方括号出现语法错误：“unexpected token {” var { Navigation } = require('react-router'); 我不确定webpackconfiguration的哪个部分正在转换，或者语法的目的是什么。这是和谐的事情吗？有人可以启发我吗？

HtmlWebpackPlugin注入加载非根网站path时破坏的相对path文件: 我正在使用webpack和HtmlWebpackPlugin注入捆绑js和css到一个html模板文件。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), 它会生成下面的html文件。 <!doctype html> <html lang="en"> <head> … <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> 当访问应用程序localhost:3000/的根目录时可以正常工作，但在尝试从另一个URL访问应用程序时失败，例如localhost:3000/items/1因为捆绑文件没有注入绝对path。当html文件被加载时，它将在不存在/items目录内查找js文件，因为react-router尚未加载。我怎样才能得到HtmlWebpackPlugin注入文件的绝对path，所以expression会寻找他们在我的/dist目录的根，而不是在/dist/items/main-…min.js ？或者，也许我可以改变我的快递服务器来解决这个问题？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 基本上，我只需要得到这一行： <script src="main…js"></script> 在源头开始时有一个斜线。 <script src="/main…js></script>

webpack – watch不编译更改的文件: 我试着运行webpack –watch并在编辑我的JS文件后，它不会触发自动重新编译。我已经尝试使用npm uninstall重新安装webpack但它仍然无法正常工作。有任何想法吗？

使用babel后，IE中的'Symbol'是未定义的: 我有一个使用ES6标准写的reactjs应用程序，我使用webpack来构build它。 webpack使用babel-loader js模块。具体来说，我使用以下版本的软件包： ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 但是，build立后，IE 10给出了以下错误'Symbol' is undefined 。不应该把babel定义为Symbol吗？是否有任何具体的configurationwebpack或babel我需要设置为了使其工作？我在我的.babelrc使用{stage: 0}configuration。任何帮助将不胜感激，谢谢！

Webpack手表不工作在Windows上Webstorm？: 所以基本上我有一个使用Webpack的项目，如果我使用Webpack -w编译，使用另一个编辑器编辑文件将触发手表; 但是，如果我使用Webstorm编辑文件，什么都不会发生。我遇到了这个post ，似乎我不是唯一的，但是这个解决scheme是Ubuntu的，所以我想知道是否有什么类似的Windows？谢谢

有人可以解释Webpack的CommonsChunkPlugin: 我得到了CommonsChunkPlugin查看所有入口点的一般要点，检查它们之间是否有常见的包/依赖关系，并将它们分离到它们自己的包中。所以，我们假设我有以下configuration： … enrty : { entry1 : 'entry1.js', //which has 'jquery' as a dependency entry2 : 'entry2.js', //which has 'jquery as a dependency vendors : [ 'jquery', 'some_jquery_plugin' //which has 'jquery' as a dependency ] }, output: { path: PATHS.build, filename: '[name].bundle.js' } … 如果我捆绑不使用CommonsChunkPlugin 我将最终得到3个新的捆绑文件： entry1.bundle.js包含来自entry1.js和jquery的完整代码，并包含自己的运行时 entry2.bundle.js包含来自entry2.js和jquery的完整代码，并包含它自己的运行时 vendors.bundle.js其中包含从jquery和some_jquery_plugin完整的代码，并包含自己的运行时这显然是不好的，因为我可能会在页面中加载jquery 3次，所以我们不希望这样做。如果我使用CommonsChunkPlugin捆绑根据我传递给CommonsChunkPlugin参数，会发生以下任何情况：案例1：如果我通过{ […]

使用webpack，ES6和Babel进行debugging: 这似乎是应该相对简单的事情，但唉。我有ES6课： 'use strict'; export class BaseModel { constructor(options) { console.log(options); } }; 和使用它的根模块： 'use strict'; import {BaseModel} from './base/model.js'; export let init = function init() { console.log('In Bundle'); new BaseModel({a: 30}); }; 我的目标是：通过Babel通过以上，获得ES5代码用webpack打包模块能够debugging结果经过一些试用，这是我有的webpackconfiguration： { entry: { app: PATH.resolve(__dirname, 'src/bundle.js'), }, output: { path: PATH.resolve(__dirname, 'public/js'), filename: 'bundle.js' }, devtool: 'inline-source-map', […]

Webpack sass在哪里的CSS文件: 我正在使用像这样的sass加载器的networking包： module.exports = { module: { loaders: [ { test: /\.scss$/, loader: "style!css!sass" } ] } }; 但我看到风格适用于样式标记，生成CSS文件在哪里？

Webpack如何构build生产代码以及如何使用它: 我对webpack非常陌生，我发现在生产版本中，我们可以减less整体代码的大小。目前webpack大约build立了8MB的文件和5MB的main.js。如何减less生产构build中的代码的大小？我从互联网上find一个示例webpackconfiguration文件，并为我的应用程序进行了configuration，我运行了npm run build及其开始构build，并在./dist/目录中生成了一些文件。这些文件仍然很重（与开发版本相同）如何使用这些文件？目前我正在使用webpack-dev-server来运行应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack –config ./webpack.production.config.js –progress –profile –colors" }, "dependencies": […]