- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
一段时间以来,我一直在绕圈子,我认为是时候寻求帮助了。
我有一个奇怪的用例,我需要将 typescript 转换成一个包,将 .css 包成一个文件,还需要复制任何不是 .js、.ts 或 .css 的其他文件。这些文件最终会保存到我们用于表单的软件将使用的服务器上。它们不能包含 .html,因此我在网上找到的大部分资源都不适用于我的用例。
无论出于何种原因,我都遇到了错误,而且我真的不知道该从哪里开始。
我的devDependencies如下:
"extract-text-webpack-plugin": "^3.0.2",
"ts-loader": "^6.2.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
我的 webpack.config.js 看起来像这样:
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const combineLoaders = require('webpack-combine-loaders');
module.exports = {
entry: glob.sync('./forms/**/index.ts').reduce((acc, path) => {
const entry = path.replace('/index.ts', '')
acc[entry] = path
return acc
}, {}),
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
}
}
],
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
combineLoaders([{
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}])
)
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: './[name]/customBundle.js',
path: path.resolve(__dirname, './public')
},
plugins: [
new ExtractTextPlugin('styles.css')
]
};
这是我得到的错误:
> ci-deploy-test@1.0.0 build C:\Users\userName\Documents\git-coding\ci-deploy-test
> webpack
(node:15584) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Chunk.js:866
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Chunk.js:866:9)
at C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
at Array.forEach (<anonymous>)
at C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compilation.js:1342:27)
at compilation.finish.err (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compiler.js:675:18)
at hooks.finishModules.callAsync.err (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compilation.js:1261:4)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.finish (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compilation.js:1253:28)
at hooks.make.callAsync.err (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compiler.js:672:17)
at _done (eval at create (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
at _err0 (eval at create (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:22)
at _addModuleChain (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compilation.js:1185:12)
at processModuleDependencies.err (C:\Users\userName\Documents\git-coding\ci-deploy-test\node_modules\webpack\lib\Compilation.js:1097:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ci-deploy-test@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ci-deploy-test@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\userName\AppData\Roaming\npm-cache\_logs\2019-11-20T01_47_46_906Z-debug.log
更新:主要工作。现在我只需要能够处理 .scss。
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: './[name]/customBundle.css',
chunkFilename: '[id].css',
ignoreOrder: false
})
],
entry: glob.sync('./forms/**/index.ts').reduce((acc, path) => {
const entry = path.replace('/index.ts', '');
acc[entry] = path;
return acc;
}, {}),
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true
}
}
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},
'css-loader'
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: './[name]/customBundle.js',
path: path.resolve(__dirname, './public')
}
};
最佳答案
这很可能与在 Webpack 4 中使用 ExtractTextPlugin 有关:
https://github.com/webpack-contrib/extract-text-webpack-plugin#usage
将您的配置迁移到:https://github.com/webpack-contrib/mini-css-extract-plugin
关于css - 使用 webpack 将 .ts 和 .css 打包成单个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58945488/
我正在尝试读取和处理一个大的 json 文件(~16G),但即使我通过指定 chunksize=500 读取小块,它仍然有内存错误。我的代码: i=0 header = True for chunk
请看下图... 我想通过 CSS 实现。 我现在将此分隔符用作在我的容器内响应的图像 ( jpg )。问题是我似乎无法准确匹配颜色或使白色晶莹剔透。 我认为 CSS 是解决这个问题的最佳方式。 尺寸为
所以我正在尝试使用 AngularJS 和 Node.js。我正在尝试设置客户端路由,但遇到一些问题。 编辑 所以我改变了一些代码如下 https://github.com/scotch-io/sta
我想创建如下图所示的边框: 这段代码是我写的 Some Text p{ -webkit-transform: perspective(158px) rotateX(338deg); -webk
好的,所以我有一个包含 2 个选项的选择表 $builder->add('type', 'choice', array( 'label' => 'User type', 'choice
我的代码: private void pictureBox1_MouseDown(object sender, MouseEventArgs e) { ngr.
我正在尝试编写 Tic-Tac-Toe 游戏代码,但不知道如何在轮到我时push_back '+' 字符。 因此,每当玩家输入例如“Oben 链接”时,这基本上意味着左上角,我希望游戏检查输入是否正确
我正在研究 HtmlHelper.AnonymousObjectToHtmlAttributes。 它适用于匿名对象: var test = new {@class = "aaa", placehol
在 stackoverflow 上所有这些 mod 重写主题之后,我仍然没有找到我的问题的答案。我有一个顶级站点,基本上我想做的就是将 /index.php?method=in&cat=Half+Li
仅使用 CSS 可以实现此功能区吗? 最佳答案 .box { width: 300px; height: 300px; background-color: #a0a0a0;
我有一个 jbuilder 模板,它用 json 表示我的一个模型,如下所示: json.(model, :id, :field1, :field2, :url) 如果我只是从控制台访问该字段,则 u
昨天我问了一个问题 - Draw arrow according to path 在那个问题中,我解释说我想在 onTouchEvent 的方向上绘制一个箭头。我在评论中得到了答案,说我应该旋转 Ca
我希望段落中的代码与代码块中显示的代码一致。 例如: The formula method for a linear model is lm(y~x, data = dat). For our da
我使用 ViewPager 获得了一个选项卡菜单。每个选项卡都包含来自 android.support.v4 包的 fragment (与旧 SDK 的兼容性)。其中一个 fragment 是 Web
我正在从事一项需要多种程序能力的科学项目。在四处寻找可用的工具后,我决定使用 Boost 库,它为我提供了 C++ 标准库不提供的所需功能,例如日期/时间管理等。 我的项目是一组命令行,用于处理来自旧
外媒 Windows Latest 报道,随着 Windows 10 的不断发展,某些功能会随着新功能的更新而被抛弃或成为可选项。早在 2018 年,微软就确认截图工具将消失,现代的 “截图和草图”
我有标记的 Angular ,我只希望标记旋转到那个 Angular 。 marker = new google.maps.Marker({ position: myL
我一定是遗漏了什么,但我不知道是什么。我有使用 polymer 实现的简单自定义元素: TECK ..
我有一个关于如何设置我们产品的分步教程。我必须在每个步骤中显示大量示例代码。以下是我必须在页面中显示的代码类型列表。我用什么来格式化所有内容? Java 代码示例 XML 样本 iOS SDK 文件(
我需要在我的 iPad 应用程序中绘制一些图表,所以我遵循了本教程: http://recycled-parts.blogspot.com/2011/07/setting-up-coreplot-in
我是一名优秀的程序员,十分优秀!