Webpack Integrated Typescript && Less

Webpack Integrated Typescript && Less

TypeScriptis JavaScript a typed superset that can be compiled into pure JavaScript , in this guide we will learn how to Typescript webpack integrate with.

Basic settings

In order to start using webpack and Typescript , first we must install in our project webpack . If you have not done so, please review webpack安装指南 .

To get started with Typescript the included webpack , you need a few things:

• Install the compiler in your project Typescript .
• Install a Typescript loader (in this case, we are using ts-loader ).
• Create a tsconfig.json file to contain our TypeScript compilation configuration.
• Create webpack.config.js to include our webpack configuration.
• You can do this by running the following methods from the npm installation TypeScript编译器 and TypeScript加载器 :

NPM Install--save-dev typescript ts-loader

Tsconfig.json
The Tsconfig file can be started as an empty configuration file, where you can see a basic configuration example that will be TypeScript compiled and es5 JSX supported.

{  "compileroptions": {    "OutDir": "./dist/",    true,     true,    "module": "Commonjs",    "target": "ES5",    " JSX ":" React ",    true  }}

You can TypeScript文档网站 read tsconfig.json more about configuration options on the

Webpack.config.js

The TypeScript basic configuration Webpack should follow this code:

Const PATH = require ("path");
Const Htmlwebpackplugin = require (' Html-webpack-plugin ');
Module.exports = {
Entry: {
App: './src/index.ts '
},
Output: {
Path:path.resolve (__dirname, "./dist"),
FileName: ' Bundle/[name].bundle.js '
},
Mode: "Development",
Devtool: ' Inline-source-map ',
Resolve: {
Extensions: ['. TSX ', '. ts ', '. js ']
},
Module: {
Rules: [
{
Test:/\.tsx?$/,
Use: [
{
Loader: "Ts-loader"
}
]
},
{
Test:/\.less$/,
Use: [
{
Loader: ' Style-loader '
},
{
Loader: ' Css-loader '
},
{
Loader: ' Less-loader '
}
]
}
]
},
Plugins: [
New Htmlwebpackplugin ({
Title: ' Output Management '
})
]
};

Here we specify our entry point as our current directory index.ts , an bundle.js output file named and our TypeScript加载器 , responsible for TypeScript compiling our files into JavaScript . We also added resolve.extensions to indicate webpack Typescript what file name extension to use when parsing the module.

Typescript Loaders

There are currently two loaders available for typescript:

• Awesome-typescript-loader

• Ts-loader

Awesome TypeScript Loading program creates a awesome-typescript-loader ts-loader wonderful explanation of the difference between one and the other.

You can read more here. In this guide, we'll use it because it's easier to ts-loader implement other Webpack features, such as importing non-code resources into a project.

Enable Source Mapping

In order to enable source mapping, we must first configure the TypeScript inline source mapping to output to the file we compiled JavaScript . This is sourceMap done by setting the property to true .

Tsconfig.json

{  true}

Once TypeScript configured as an output source mapping, we need to tell the webpack source map to extract and pass it to the browser so that we can see it in our Code Editor 源文件 .

Webpack.config.js

Module.exports ='./index.ts ', output: {   ' bundle.js ',   path: __dirname}, module: {   Rules: [     {       ' pre ',       /\.js$/,       ' Source-map-loader '     },     {        ' pre ',       /\.tsx?$/,       ' Source-map-loader '     }   ]}, Resolve: {   extensions: [". TSX", ". ts", ". js"' Inline-source-map ',};

First we add a source-map-loader new loader named.

To install it, run:

NPM Install--save-dev Source-map-loader

Once the loader is installed, we need to tell webpack us to enforce：‘pre‘ run the loader using the configuration flag before any other loader. Finally, we need to devtool enable webpack the source mapping in by specifying a property. Currently we use ‘inline-source-map‘ settings to read more about this setting and see additional options to view the Devtool documentation.

Using third-party libraries

When installing a third-party library from NPM, be sure to remember to install the library's typing definition.

You can @types install third-party library definitions from the repository.

For example, if we were to install lodash , we could run the following command to get its input:

NPM Install--save-dev @types/lodash

For more information, see this blog post

Import non-code partial resources

To use ypeScript a non-code resource for T, we need to tell you TypeScript how to defer these imported types.

To do this, we need to create a custom.d.ts file. This file represents a custom definition of T in our project ypeScript .

In our custom.d.ts file, we need to svg provide a definition for the import, so we need to put the following in this file:

DECLARE module "*.svg" {  const content:any;   default content;}

Here, we .svg declare a new module by specifying any import at the end, svg and define the type of the module as any . If we want to be more specific about this url , we can define the type as 字符串 .

This applies not only to svg , but also to any custom loaders you might want to use, including css，scss，json any other files that you might want to load in your project.

Webpack Integrated Typescript && Less