Tag: Webpack

使用多个入口点包含babel polyfill的最佳方式是什么？: 我正在使用多个入口点的webpackconfiguration： var fs = require('fs'); var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js'); module.exports = { cache: true, entry: { main: './resources/assets/js/main.js', services: './resources/assets/js/services.js' }, output: { path: './public/assets/web/js', filename: '[name].[hash].js', publicPath: '/assets/web/js/', chunkFilename: '[id].[chunkhash].js' }, resolve: { modulesDirectories: ['node_modules', 'web_modules', 'modules'] }, module: { loaders: [{ test: /\.js$/, exclude: [/node_modules/, /web_modules/], loader: 'babel-loader', […]

Webpack-dev-server不会生成源地图: 我使用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' ] }, […]

在摩卡testing中使用webpack别名: 我正在React / Redux / Webpack中开发一个Web应用程序，现在我正在开始与Mocha集成testing。我按照在Redux文档中编写testing的说明进行操作，但是现在我遇到了一个与我的webpack别名有关的问题。例如，看看我的一个动作创build者的testing的import部分： import expect from 'expect' // resolves without an issue import * as actions from 'actions/app'; // can't resolve this alias import * as types from 'constants/actionTypes'; // can't resolve this alias describe('Actions', () => { describe('app',() => { it('should create an action with a successful connection', () […]

webpack-dev-server不会监视我的文件更改: 在webpack-dev-server运行时更改我的文件时，不更新软件包的文件。下面是我的webpack.config.js和package.json文件，你可以从我的npm脚本中看到，我已经解决了在同一命令（ 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: […]

错误在找不到模块'babel-core'。使用react.js，webpack和express服务器: 每当我在terminal上运行webpack时，我会得到： Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' 这是我的webpack.config.js文件 module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } 的package.json { "name": "react", "version": "1.0.0", "description": "React polling app", "main": "app-client.js", "dependencies": […]

如何编写Webpack的插件，基于其他模块在飞行中添加模块？: 编写翻译服务的Webpack插件时遇到问题。目标是：在编译期间获取所有必需模块的名称（和源代码）。我需要能够扫描包含的源代码的特殊t()函数的使用情况，但我只想扫描将被包含在该包（这取决于构buildconfiguration，可以是所有项目模块的子集）。根据收集到的模块，我想创build更多的模块（带有翻译），并将其添加到包中。这些模块需要能够导入自己的依赖关系。另外一个要求就是Webpack的代码分割function应该可以和dynamic创build的模块一起工作（我想把它们提取到不同的文件 – 例如bundle.[lang].js ）。此外，这可能超出了这个问题的范围，我必须使这些块翻译可选（所以你不必加载所有的语言，但只有一个）。更多细节可以在https://github.com/ckeditor/ckeditor5/issues/387find。我一直在尝试多种解决scheme，但Webpack 2的文档不是很有帮助。我可以通过侦听模块parsing钩子（ before-resolve ）来获取所有的模块，但是我不知道所有的依赖关系何时parsing，我不知道在这之后是否可以添加更多的模块（以及如何做到这一点- addEntry确定，当我可以使用它？）。我也在考虑连接Webpack插件和Webpack加载器（因为我需要的特性与Webpack的样式加载器非常相似），但是从插件级别来说，我只能添加加载器的path，而不是加载器本身，所以我可以“ t传递configuration对象作为参数 – 我错了吗？ PS。我使用Webpack 2.如果需求看起来很奇怪，请参阅https://github.com/ckeditor/ckeditor5/issues/387 :)。

如何使用webpack的笑话？: 我使用webpack来开发一个React组件。这是一个简单的版本： 'use strict'; require('./MyComponent.less'); var React = require('react'); var MyComponent = React.createClass({ render() { return ( <div className="my-component"> Hello World </div> ); } }); module.exports = MyComponent; 现在，我想用jest来testing这个组件。这里是我的package.json的相关位： "scripts": { "test": "jest" }, "jest": { "rootDir": ".", "testDirectoryName": "tests", "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", "unmockedModulePathPatterns": [ "react" ] } 运行npm test ，出现以下错误： SyntaxError：/Users/mishamoroshko/react-component/src/tests/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent.less：Unexpected令牌非法看起来webpack需要先处理require('./MyComponent.less')然后才能运行testing。我想知道是否需要使用像jest-webpack这样的东西。 […]

将webpackconfiguration为在单独的子文件夹中输出图像/字体: 我pipe理configurationwebpack输出CSS和JS到各自的子目录，即public/asests/css和public/assets/js 。但是，我不知道如何做图像和字体的相同。换句话说，我想要将public/assets/images文件夹和字体中的public/assets/images输出到public/assets/fonts文件夹中。这是我的webpackconfiguration文件： var path = require('path'); var ExtractCSS = require('extract-text-webpack-plugin'); module.exports = { context: path.resolve('private/js'), resolve: ['', '.js', '.jsx', '.es6', '.json'], entry: { homepage: './homepage' }, output: { path: path.resolve('public/assets'), publicPath: '/public/assets/', filename: 'js/[name].js' }, plugins: [ new ExtractCSS('css/[name].css') ], devServer: { contentBase: 'public' }, module: { loaders: [ { test: /\.(es6|js|jsx)$/, […]

使用webpack定义全局variables: 是否有可能用webpack定义一个全局variables来得到如下结果： var myvar = {}; 我看到的所有示例都使用外部文件require("imports?$=jquery!./file.js")

webpack不被识别为内部或外部命令，可操作程序或batch file: 我正在学习React.js，我正在使用Windows 8 OS.i已导航到我的根文件夹 1.Created the package.json file by npm init 2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder 3. install webpack globally by typing npm install webpack -g 4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory 5. […]