Tag: Webpack

使用webpack ExtractTextPlugin获取css输出: 我试图让CSS需要使用ExtractTextPlugin在webpack中工作，但没有成功我想要一个单独的CSS文件，而不是内联任何CSS。这是我的webpackconfiguration： var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './scripts/index' ], output: { path: path.join(__dirname, 'build'), filename: 'bundle.js', publicPath: '/scripts/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new ExtractTextPlugin('styles/styles.css', { allChunks: true }) ], resolve: { extensions: ['', '.js', '.jsx'] […]

Webpack装载机与插件; 有什么不同？: webpack中的加载器和插件有什么区别？插件的文档只是说：使用插件添加通常与webpack中捆绑相关的function。我知道babel使用jsx / es2015转换器的加载器，但是看起来像其他常见任务（例如copy-webpack-plugin）使用插件。

Angular 2unit testing – 获取错误无法加载“ng：///DynamicTestModule/module.ngfactory.js”: 我有angular 2 webpack应用程序，所有webpack，根据angular.io webpack指南创build的业力configuration。我不使用aot。我正在写茉莉花unit testing规范来testing我的组件。首先，我尝试没有asynchronous块，在这种情况下，unit testing只是得到执行，直到fixture.detectChanges（）调用，之后的代码不会得到执行。好像fixture.detectChanges调用无限地被阻塞。我试图通过在asynchronous块中包含代码。然后我得到以下错误。错误：无法在'XMLHttpRequest'上执行'发送'：无法加载'ng：/// DynamicTestModule /module.ngfactory.js' 代码没有asynchronous beforeeach(()=> { TestBed.configureTestingModule({ imports:[], declaration :[Mycomp], providers:[{ provide:MyService, useclass:MyMockService}] }); fixture=TestBed.createComponent(Mycomp); console.log(' before detect changes'): fixture.detectChanges(): console.log('after detect changes');// this is not getting logged .. karma shows 0 of 1 executed successfully }); 与asynchronous beforeeach(async(()=> { TestBed.configureTestingModule({ imports:[], declaration […]

在WebStorm中导入的path别名: 我使用webpackpath别名来加载ES6模块。例如，如果我为utils定义一个别名而不是类似的东西 import Foo from "../../../utils/foo" ，我可以做 import Foo from "utils/foo" 问题是，一旦我开始使用别名，WebStorm失去了对导入的跟踪，我留下了警告，并没有自动完成。有没有办法指示WebStorm使用这些别名？

Ionic 2：ReferenceError：webpackJsonp没有定义: 我是新来的离子。我已经开始使用超级模板的项目。但是当我尝试在浏览器中运行应用程序。它抛出一个错误说： ReferenceError: webpackJsonp is not defined at http://localhost:8100/build/main.js:1:1 我已经尝试在index.html中放置vendor.js，但没有奏效。这是index.html文件。我已经删除了vendor.js，因为它不起作用。 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!– cordova.js required for cordova apps –> <script […]

字段“浏览器”不包含有效的别名configuration: 我已经开始使用webpack2（准确地说， v2.3.2 ），并重新创build我的configuration后，我一直遇到一个问题，我似乎无法解决。我得到（提前抱歉难看的转储）： ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration aliased with mapping […]

如何使用webpack-dev-server和html-webpack-plugin观看index.html: 我正在使用webpack-dev-server与html-webpack-plugin进行开发，以生成带修订源的index.html。事情是每次我改变index.html捆绑系统不会重新重build。我知道索引是不是在入口，但有没有办法解决这个问题？

Sass与CSS模块和Webpack: 我一直在使用Webpack，Sass和CSS模块构build一个项目。通常在我的.scss文件中，我定义了一个类如下： :local(.button) { color: white; } 在我的React组件中，在render方法中，我需要样式： render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> } 和世界都好。一切都按预期工作。现在我正在阅读CSS模块页面，注意到没有一个select器被:local()包含在内，而且他们导入的样式如下： import styles from './MyStyles.scss'; 我认为“哇，看起来更好，更容易看到它的import等，而我不想使用:local() ，只是本地默认情况下。所以我试了一下，立即遇到了几个问题。 1）`从./MyStyles.scss'导入样式; 因为我在我的React文件上使用了ESLint，所以我马上得到一个错误： MyStyles.scss没有默认的导出，这通常是有意义的，但CSS模块页面声明：从JS模块导入CSS模块时，它会导出一个包含从本地名称到全局名称的所有映射的对象。所以我自然希望样式表的默认导出也是他们所指的对象。 2）我试着import { button } from './MyStyles.scss'; 这通过linting，但button日志为未定义。 3）如果我恢复到导入我的样式的require方法，任何未指定的:local是未定义的。作为参考，我的webpack加载器（我也包括Node-Neat和Node-Bourbon ，两个很棒的库）： { test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + […]

在同构React组件中导入CSS文件: 我有一个用ES6编写的组件的React应用程序 – 通过Babel和Webpack传输。在一些地方，我想包含特定的CSS文件与特定的组件，如反应webpack食谱build议但是，如果在任何组件文件中，我需要一个静态CSS资源，例如： import '../assets/css/style.css'; 然后编译失败，出现错误： SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0) at Parser.pp.raise (<PROJECT>\node_modules\babel-core\lib\acorn\src\location.js:73:13) at Parser.pp.getTokenFromCode (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:423:8) at Parser.pp.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:106:15) at Parser.<anonymous> (<PROJECT>\node_modules\babel-core\node_modules\acorn-jsx\inject.js:650:22) at Parser.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\plugins\flow.js:694:22) at Parser.pp.nextToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:98:71) at Object.parse (<PROJECT>\node_modules\babel-core\lib\acorn\src\index.js:105:5) at exports.default (<PROJECT>\node_modules\babel-core\lib\babel\helpers\parse.js:47:19) at File.parse (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:529:46) at File.addCode (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:611:24) 看来，如果我尝试在组件文件中需要一个CSS文件，那么Babel加载器会将其解释为另一个源文件，并尝试将CSS传输到Javascript中。这是预期的吗？有没有办法做到这一点 – 允许转储的文件显式引用静态资产是不是被转发？我已经为.js / jsx和CSS资源指定了加载器，如下所示： module: { loaders: […]

如果文件名为jsx，webpack无法find模块: 当我写这样的webpack.config.js module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 并在index.jsx我导入一个react模块的App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( <App />, rootElement ) 我发现如果我在App.jsx命名模块的应用程序，然后webpack会在index.jsx说，找不到模块的App […]