我正在尝试使用 typescript 设置 webpack 构建管道。我想根据文档设置单独的开发和生产版本:https://webpack.js.org/guides/production/#setup
我的项目中还没有太多代码,只有一个简单的index.ts文件,它引入一个css文件、一个png文件和一个从print.ts文件导入的printMe函数。 (示例取自 webpack 文档)
当我尝试在开发或生产上构建时,出现以下错误:
ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Code\Treads'
resolve './src' in 'C:\Code\Treads'
using description file: C:\Code\Treads\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Code\Treads\package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src.wasm doesn't exist
as directory
existing directory C:\Code\Treads\src
using description file: C:\Code\Treads\package.json (relative path: ./src)
using path: C:\Code\Treads\src\index
using description file: C:\Code\Treads\package.json (relative path: ./src/index)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src\index.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\Code\Treads\src\index.wasm doesn't exist
不确定我是否在这里遗漏了某些内容或者配置是否已关闭。这是我第一次尝试使用 webpack 来构建网站,所以我可能会错过一些简单的东西。
项目结构如下:
├───dist
├───node_modules
└───src
├───assets
├───css
├───game
└───types
└─── png.d.ts
free.png
index.ts
print.ts
style.css
package-lock.json
package.json
README.md
tsconfig.json
webpack.common.js
webpack.dev.js
webpack.prod.js
package.json
{
"name": "treads",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"author": "Anonymous",
"license": "MIT",
"devDependencies": {
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"html-webpack-plugin": "^5.5.3",
"mini-css-extract-plugin": "^2.7.6",
"style-loader": "^3.3.3",
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.10.0"
},
"dependencies": {
"@types/bootstrap": "^5.2.8",
"@types/d3": "^7.4.2",
"bootstrap": "^5.3.2",
"d3": "^7.8.5"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"typeRoots": ["./node_modules/@types", "./src/types"],
"allowJs": true,
"sourceMap": true,
"outDir": "./dist/",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"skipLibCheck": true
}
}
webpack.common.js
module.exports = (env) => {
console.log(`Environment: ${env}`)
return {
entry: './src/index.ts',
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '...'],
},
}
};
webpack.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = (env) => {
console.log(env)
const dev = {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
}
return merge(common, dev)
};
webpack.prod.js
const path = require('path');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { merge } = require('webpack-merge');
module.exports = (env) => {
console.log(env)
const prod = {
mode: 'production',
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
output: {
filename: '[name].[contenthash].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
"css-loader",
],
}
],
},
}
return merge(common, prod)
};
样式.css
.hello {
color: red;
background: url('./free.png');
}
index.ts
import * as d3 from 'd3';
import './src/style.css';
import Icon from './src/free.png';
import printMe from './print';
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = 'Hello World';
element.classList.add('hello')
const myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
打印.ts
export default function printMe(): void {
console.log('I get called from print.js!');
}
我尝试了几种不同的方法来尝试解决问题,所有这些都导致我遇到与上面相同的错误:
导出的
common
看起来是一个函数。如果您按原样使用它会发生什么 - merge(common(env), dev))
。
我建议您检查合并的配置,它看起来如何 - 根据您收到的错误消息,该条目是错误的。