css - 使用 webpack 将 .ts 和 .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')
}
};
解决方案
This is most likely related to using the ExtractTextPlugin with Webpack 4:
https://github.com/webpack-contrib/extract-text-webpack-plugin#usage
Migrate you configuration to: https://github.com/webpack-contrib/mini-css-extract-plugin
推荐阅读
- python - 这个 Sphinx autodoc MockFinder 错误的原因是什么?
- r - 如何使用“starts_with”函数对数据框进行子集化?
- android - Koltin,从变量设置媒体播放器
- c# - C# 异常未正确序列化/反序列化
- javascript - 如果另一个元素的类等于某物,是否可以更改元素的类?
- r - pivot_longer 连续多个观察值
- graphql - 有没有办法强制从服务器端断开苦艾图订阅?
- excel - 尝试将列中的选定单词数更改为不同的单词 Excel VBA
- syntax - YAML 使用 neovim 和 treesitter 缩进?
- sql - Oracle SQL 创建汇总总计