Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to build scaffolding and package TypeScript code in webpack. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Create a folder

Directory structure: dabaots

Initialize npm init-y to generate package.json file

Directory structure:

Dabaots

Dabaots / package.json

Then install the following tools in the development environment

Npm I-D

Webpack (the core tool for packaging code

Webpack- cli (command line tool for webpack)

Typescript (core package required to write ts)

Ts-loader (webpack and ts can be integrated through ts-loader)

Html-webpack-plugin... (is a webpack plug-in that automatically generates html)

Webpack-dev-server... (no need to refresh the update page)

Clean-webpack-plugin... (automatically empty the files in dist before each package is launched. How to regenerate the latest files.)

"@ babel/core"@ babel/preset-env" babel-loader core-js (install babel transformation, it will be converted to whatever environment you are)

Minor problems you may encounter: the problem that may arise here is that if the webpack-dev-server version of the dependency package you downloaded does not fit with Google, it is recommended to lower the plug-in version or upgrade Google browser to the latest version, otherwise there will be an error Cannot GET / chrome.exe

Next, create a webpack.config.js to configure

Directory structure:

Dabaots

Dabaots / package.json

Dabaots / webpack.config.js

/ / introduce a package const path = require ("path") / / introduce the package const HtmlWebpackPlugin = require ("html-webpack-plugin") that automatically generates html / / the plug-in const {CleanWebpackPlugin} = require ("clean-webpack-plugin") / / webpack that updates the dist file should write all the configuration information in moudle.exports to module.exports= {/ / specified entry file entry: ". / src/index.ts". / / specify the directory where the packaged file is located: output: {/ / specify the directory path:path.resolve (_ _ dirname, "dist") of the packaged file, / / specify the file filename of the packaged file: "bundle.js", / / compile without using the arrow function environment: {arrowFunction: false}} / / the module module is used when webpack is packaged: module: {/ / specify the rule to be loaded rules: [{/ / test specifies the file test:/\ .ts $/ where the rule takes effect / / use is the loader to be used / / configure babel use: [{/ / specify loader loader: "babel-loader" Options: {/ / set predefined environment presets: [[/ / plug-in for specified environment "@ babel/preset-env" / / configuration information {/ / compatible browsers targets: {"chrome": "88" } / / specify the version of corejs "corejs": "3" / / indicates that "useBuiltIns": "usage"}]} is loaded on demand. 'ts-loader'], / / set files that are not packaged and uploaded exclude: ["/ node_modules/"]}]} / / configure the webpack plug-in plugins: [new HtmlWebpackPlugin ({/ / Custom html template address template: ". / src/index.html"}), / / automatically empty the files in dist before each package is launched. How to regenerate the latest file new CleanWebpackPlugin ()] Resolve: {/ / resolve the error report when other ts packages are introduced separately inside the ts file extensions: [.ts', '.js']}}

Finally, the scripts of packaging and running are written in package.json.

You can package and run it in the terminal npm run build.

After successful packaging, a dist file will be automatically generated.

Npm run start automatically opens Google browser and the content is hot updated

On "how to build scaffolding webpack packaging TypeScript code" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.