typescript webpack工程步骤
前置条件:安装完nodejs,然后typescript,webpack全局安装
1.创建目录
2.npm init 生成 package.json
3.npm install --save 添加工程依赖
4.npm install --save-dev添加开发依赖,npm install --save-dev添加开发依赖,typescript工程一般需要添加npm install --save-dev typescript awesome-typescript-loader source-map-loader,其中:awesome-typescript-loader可以让Webpack使用TypeScript的标准配置文件tsconfig.json编译TypeScript代码。 source-map-loader使用TypeScript输出的sourcemap文件来告诉webpack何时生成自己的sourcemaps。 这就允许你在调试最终生成的文件时就好像在调试TypeScript源码一样。
5.tsc -init 生成tsconfig.json 文件,然后修改为类似如下
{"compilerOptions": {"outDir":"./dist/","sourceMap":true,"noImplicitAny":true,"module":"commonjs","target":"es5","jsx":"react"},"include": ["./**/*"],"exclude": ["node_modules"]
}
6.创建一个webpack配置文件webpack.config.js,类似如下:
module.exports = {
entry:"./src/index.tsx",
output: {
filename:"bundle.js",
path: __dirname +"/dist"},// Enable sourcemaps for debugging webpack's output.devtool:"source-map",
resolve: {// Add '.ts' and '.tsx' as resolvable extensions.extensions: ["",".webpack.js",".web.js",".ts",".tsx",".js"]
},module: {
loaders: [// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.{ test:/\.ts?$/, loader:"awesome-typescript-loader"}
],
preLoaders: [// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.{ test:/\.js$/, loader:"source-map-loader"}
]
},// When importing a module whose path matches one of the following, just// assume a corresponding global variable exists and use that instead.// This is important because it allows us to avoid bundling all of our// dependencies, which allows browsers to cache those libraries between builds.externals: {"react":"React","react-dom":"ReactDOM"},
};
