typescript webpack工程步驟

前置條件:安裝完nodejs,然后typescript,webpack全局安裝

1.創(chuàng)建目錄

2.npm init 生成 package.json

3.npm install --save 添加工程依賴

4.npm install --save-dev添加開(kāi)發(fā)依賴,npm install --save-dev添加開(kāi)發(fā)依賴,typescript工程一般需要添加npm install --save-dev typescript awesome-typescript-loader source-map-loader,其中:awesome-typescript-loader可以讓W(xué)ebpack使用TypeScript的標(biāo)準(zhǔn)配置文件tsconfig.json編譯TypeScript代碼。 source-map-loader使用TypeScript輸出的sourcemap文件來(lái)告訴webpack何時(shí)生成自己的sourcemaps。 這就允許你在調(diào)試最終生成的文件時(shí)就好像在調(diào)試TypeScript源碼一樣。

5.tsc -init 生成tsconfig.json 文件,然后修改為類(lèi)似如下

{"compilerOptions": {"outDir":"./dist/","sourceMap":true,"noImplicitAny":true,"module":"commonjs","target":"es5","jsx":"react"},"include": ["./**/*"],"exclude": ["node_modules"]

}

6.創(chuàng)建一個(gè)webpack配置文件webpack.config.js,類(lèi)似如下:

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

};