typescript webpack工程步骤

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"},

};