Tag: webpack

导入path不能以'.ts'结尾 – NodeJS和Visual Code

我试图构build一个简单的NodeJS应用程序时出现错误： 即使这个可视代码提示错误，我的代码正在运行..当我从导入语句中删除.ts扩展名，我得到一个错误，该文件无法find。 我正在使用webpack，但这些文件来自服务器。 这是我的文件夹结构： 这是我的webpack文件： var webpack = require('webpack'); var helpers = require('./helpers'); //# Webpack Plugins var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; var ExtractTextPlugin = require('extract-text-webpack-plugin'); //# Webpack Constants const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const HMR = helpers.hasProcessFlag('hot'); const METADATA = […]

模块未find：错误：无法parsing模块“模块”

我想从variablesstring中加载模块 var abc = './../containers/BlankContainer'; require(abc); 但是它找不到模块，所以我从npm安装'require-from-string'模块。 现在，当我build立它给错误 ERROR in ./~/require-from-string/index.js Module not found: Error: Cannot resolve module 'module' in D:\Nilay\RnD\node_modules\require-from-string @ ./~/require-from-string/index.js 3:13-30 我发现这是webpack的问题，这里是我的webpackconfiguration： const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin') var entry = [path.resolve(__dirname, 'app/bootstrap.js')]; var output = { path: path.resolve(__dirname, 'public/dist'), filename: 'bundle-[name].js', publicPath: "dist/" }; var […]

如何使用React，Node和Webpack呈现帕格/翡翠模板？

我有一个React / Node / Express应用程序，我正在使用Webpack来构build它。 目前，该目录的结构是这样的： node_modules public app main.js main.map.js index.html src client components Home.js Header.js Root.js User.js main.js server views index.html index.js package.json webpack.config.js 这是我的webpack.config.js var path = require("path"); var DIST_DIR = path.resolve(__dirname, "public"); var SRC_DIR = path.resolve(__dirname, "src"); var config = { entry: SRC_DIR + "/client/main.js", output: { path: DIST_DIR + "/app", […]

发布一个需要来自node_modules的CSS的npm包

我试图发布到npm的React组件需要一个CSS样式表，来自我的项目在node_modules的一个依赖关系。 基本上，我的index.js文件（将组件暴露给外部世界）看起来像这样： import Gallery from './containers/GalleryContainer'; require('../../node_modules/jscrollpane/style/jquery.jscrollpane.css'); export default Gallery; 这可以在我的webpack驱动的开发环境中工作，因为webpack拾取CSS文件并将其注入DOM（使用css-loader和style-loader），但是如果我不确定如何打包发布。 我想发布这个包作为ES5，并希望用户能够在ES6上下文（使用webpack / browserify）或直接在浏览器中使用它。 到目前为止，我把我的ES6代码转换成ESB和Babel到preublish的lib文件夹中。 这需要照顾的JavaScript，但不是它需要的CSS。 我是否必须指示我的图书馆的用户手动链接CSS，还是有一种方法可以使这个require语句是可移植的？

Webpack – 不输出某个入口点的包

即时通讯使用文件加载器来自动呈现一堆帕格模板静态html文件，但webpack也输出基于入口点的无意义的文件 例如，这是在我的webpack.config.js： entry: { 'js/build/bundle.js': './js/app.js', 'this-shouldnt-emit': './pug/.pug.js' //pug entry point }, output: { path: path.join(__dirname, '../'), filename: '[name]' }, … // pug loading module rule { test: /\.pug$/, include: path.resolve(__dirname, "../pug"), use: [ "file-loader?name=[path][name].html&context=./pug", "pug-html-loader?pretty&exports=false" ] } 和我得到一个this-shouldnt-emit束文件的根目录，我不想要的。 我怎样才能阻止文件加载器发出一个输出包，但不会干扰它生成当前所有的静态html文件。 是否有一个插件或某种types的可以放在装载机链末端的空装载程序来终止发送的包？

Webpack – 将哈希包的URL插入静态哈巴狗模板

即时通讯使用webpack pug-html-loader +文件加载器来生成一堆静态帕格模板。 我也想开始添加哈希包的文件名，但我不能解决如何将哈希文件名插入我所有的哈巴狗模板 这是如何引用我的包当前在所有的哈巴狗模板： script(src="bundle.js") link(href="bundle.css") 我怎么修改引用bundle-[chunkhash].js / bundle-[chunkhash].css] – 我需要传递一些variables到我的webpack.config.js中的pug-html-loader吗？ 注意使用extract-text-plugin将我的SASS输出到.css包文件

Visual Studio 2017预运行生成事件

我想在每次运行项目时都运行一个npm脚本。 这个命令将启动一个触发webpack热模块交换的手表。 它看起来像这样： npm run watch:dev:hmr 我知道我可以从post和预先构build的事件中做到这一点，但是我不想在每次构build之后运行一个手表。 我只想运行它，然后开始我的项目的一个新的实例，理想情况下，当实例停止时，停止它。 可以这样做吗？

Webpack将自定义实用程序与应用程序代码分开捆绑

我想使用webpack捆绑我的TypeScript ReactJs项目。 由于我的项目相当大，我想要将应用程序与主应用程序代码分开捆绑，所以我可以将它们分开。 我有以下文件夹结构; Scripts – App – Components – ComponentOne.tsx – App.tsx – Utilities – Interfaces – IHelperInterface.ts – Interfaces.ts ComponentOne import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';一个导入语句import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface'; 随着我的自定义实用程序，我也使用npm的各种软件包。 所以我目前的webpackconfiguration看起来像这样; var webpack = require('webpack'), pkg = require('./package.json'); module.exports = { entry: { app: './scripts/app/app', vendor: Object.keys(pkg.dependencies) }, output: { filename: […]

如何使用webpack手动testing反应组件？

我知道我们应该对我们的reactjs组件使用unit testing。 但是我也想要的是一些独立手动testing组件的方法 。 因为我们正在研究小型冲刺，我们必须在首先使用该组件的页面之前交付一些完成的组件。 我希望看到完整的组件真的能够工作（即testing与CSS和子组件的集成）。 因此，首先我想看看在黑色页面中呈现的新组件不直接需要该组件，而是从查询string参数中获取该组件名称/path。 然后，我打算在该页面添加一些通用组件configuration（例如，带有json的文本框，表示要传递给该组件的道具）。 我现在面临的第一个问题是如何configurationwebpack ， webpack-dev-middleware或webpack-dev-server ，以便能够加载通过parameter passing的组件。 任何人都知道如何？ 或者更好的方法来处理这个？

ReferenceError：在Webpack中使用ExtractTextPlugin时没有定义窗口

我正在使用Webpack来构build我们的项目ExtractTextPlugin插件来分离我们的CSS到单独的文件。 它适用于项目中大部分CSS / LESS / SASS文件，除了属于第三方库的一个vendor.css文件。 只要我包含这个文件到我的项目中，我得到ReferenceError：窗口没有定义错误消息。 如果我不使用ExtractTextPlugin不会出现错误消息。 我的LESSconfiguration的webpack.config.js部分如下（完整文件在这里 ）： new ExtractTextPlugin(__dirname + '/Content/js/styles/styles.css'), … module: { { test: /\.less$/, loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!' + 'autoprefixer-loader!' + 'less-loader' ) } } 完整的错误信息输出在这里 。 以下是我导入这个特定的LESS文件的工作stream程：需要styles.js文件，这需要vendor.less文件，它需要来自Bower目录中第三方库的CSS。 styles.js ： require('../../../less/vendor.less'); vendor.less ： @import (css) "~vendor-ui-bootstrap/dist/css/arena.css"; arena.css包含编译的CSS。