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加载器会将其解释为另一个源文件,并尝试将CS​​S传输到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 […]