Javascript 如何使用webpack编译单个文件?
我正在设置一个typescript项目,它将从javascript文件迁移。下面是文件夹的结构Javascript 如何使用webpack编译单个文件?,javascript,node.js,typescript,webpack,Javascript,Node.js,Typescript,Webpack,我正在设置一个typescript项目,它将从javascript文件迁移。下面是文件夹的结构 src --featureA ----script1.ts ----script2.ts ----index.ts --featureB ----script1.ts ----index.ts tsconfig.ts webpack.config.js package.json 我的tsconfig.ts { "compileOnSave": true, "compilerOptions":
src
--featureA
----script1.ts
----script2.ts
----index.ts
--featureB
----script1.ts
----index.ts
tsconfig.ts
webpack.config.js
package.json
我的tsconfig.ts
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"rootDir": "src",
"outDir": "dist",
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"alwaysStrict": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"suppressExcessPropertyErrors": false,
"suppressImplicitAnyIndexErrors": false,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"lib": ["es5", "dom"],
"typeRoots": [
"node_modules/@types"
],
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules"
]
}
我的网页包配置
const { CheckerPlugin } = require("awesome-typescript-loader");
module.exports = {
mode: "development",
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
devtool: "source-map",
module: {
rules: [
{
test: /\.tsx?$/,
loaders: ["awesome-typescript-loader"]
}
]
},
plugins: [
new CheckerPlugin()
],
devServer: {
before(app) {
},
contentBase: "web"
}
};
mypackage.json
"scripts": {
"start": "webpack-dev-server"
},
"devDependencies": {
"awesome-typescript-loader": "^3.5.0",
"typescript": "^2.7.2",
"typewiz": "^1.2.3",
"typewiz-webpack": "^1.2.3",
"webpack": "^4.20.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
}
功能A和B是独立的,我没有main.js文件作为入口点。如果我编译并缩小功能A,我将获得featureA.js文件并部署。这是我想要达到的结果
我仍然不知道这个设置是否符合我的要求?我如何使用webpack按需编译每个功能以及所需的命令,如下所示:
Input: npm compile featureA
Output: featureA.js (with minified)
你能帮我吗?也许你可以使用多个入口点?像这样:
entry: {
featureA: './src/featureA/index.ts',
featureB: './src/featureB/index.ts'
}
Webpack将把这两个文件编译成两个单独的包。也许您可以使用多个入口点?像这样:
entry: {
featureA: './src/featureA/index.ts',
featureB: './src/featureB/index.ts'
}
Webpack将把这两个文件编译成两个单独的包