Я работаю над созданием потока разработки для своей компании, используя webpack, babel, typcript и tslint (и, вероятно, более 100 других зависимостей) - на данный момент у меня есть рабочий базовый проект, но, похоже, я могу тольколибо перенесите мой src / index.js, либо скомпилируйте мой src / app.ts. Я хотел бы перенести / скомпилировать и связать оба вместе в dist / bundle.js. Я попробовал несколько разных способов (закомментировано в файле webpack.config) и не могу заставить его работать - я подумал, что кто-то, кто делал это раньше, может сказать мне через 2 секунды.
repo: https://github.com/behler-young-insite/webpack-babel-npm-config/tree/webpack-babel-ts-tslint
package.json:
"name": "babelConfigTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server",
"dev2": "webpack-dev-server --mode development"
},
"repository": {
"type": "git",
"url": "https://git-codecommit.us-east-1.amazonaws.com/v1/repos/babelConfigTest"
},
"keywords": [],
"author": "Derek DenHartigh <derekd@behler-young.com> (behler-young.com)",
"license": "BY",
"dependencies": {
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.2.0",
"tslint": "^5.20.0",
"tslint-webpack-plugin": "^2.1.0",
"typescript": "^3.6.3"
}
}
webpack.config.js:
const path = require('path');
const TSLintPlugin = require('tslint-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.join(__dirname, '/src'), // now this transpiles my index.js, but not my app.ts
//entry: path.join(__dirname, '/src/**/*(.ts|.js)'), // this does nothing but break the code
// entry: path.join(__dirname, '/src/**/*.(ts|js)'), // this does nothing but break the code
// entry: path.join(__dirname, '/src/app.ts'),// this compiles the app.ts
output: {
filename: 'bundle.js',
path: __dirname + 'dist'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.js#/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
plugins: [
new TSLintPlugin({
files: ['./src/**/*.ts']
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
структура каталогов: структура каталогов
ps Я также получаю ошибки lint о no-console, хотя в tslint.json мое правило no-console установлено на false ... не уверен, связано это или нет, чем больше данных, тем лучше данныехотя моя философия.