Development tools: VS-Code

1. Create a project directory

The development directory for this example is: books

2. Initialize the project

npm init -y

The package.json file is automatically generated and configured as follows:

{
  "name": "books"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build": "webpack"."start": "webpack serve"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

Project launch: Webpack Serve

Project packaging: Webpack

Note: Execute after installing dependencies

Initialize typescript

Command: TSC –init

When this is done, the tsconfig.json file is automatically generated locally.

You can delete the comments based on actual requirements and modify the configurations as follows:

{
    "include":["./src/**/*"],
    "compilerOptions":{
        "module":"ES2015",
        "target":"ES2015",
        "strict":true,
        "outDir": "./dist",
        "noEmitOnError": true
    }
}
Copy the code

4. Install dependencies

For example: NPM I webpack -d

Webpack, webpack-cli, typescript, TS-loader, html-webpack-plugin: HTML plugin, webpack-dev-server: Auto-build project files and auto-refresh browser, clean-webpack-plugin: auto-delete old files packed previously, mini-CSs-extract-plugin: extract CSS to a separate file, copy-webpack-plugin: Copy static resources, Node-sass, Sass-loader, babel-loader, @babel/core, @babel/preset-env, style-loader, postcss, postCSS-loader, postcss-preset-env

Package. json file after installing dependencies:

{
  "name": "books"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build": "webpack"."start": "webpack serve"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.14.8"."@babel/preset-env": "^ 7.14.8"."clean-webpack-plugin": "^ 4.0.0 - alpha."."copy-webpack-plugin": "^ 9.0.1"."css-loader": "^ 6.2.0"."html-webpack-plugin": "^ 5.3.2." "."mini-css-extract-plugin": "^ 2.1.0." "."postcss": "^ 8.3.5"."postcss-loader": "^ 6.1.1." "."postcss-preset-env": "^ 6.7.0"."sass-loader": "^ 12.1.0"."style-loader": "^ 3.2.1." "."ts-loader": "^ 9.2.3." "."typescript": "^ 4.3.5." "."webpack": "^ 5.44.0"."webpack-cli": "^ 4.7.2." "."webpack-dev-server": "^ 3.11.2"
  },
  "dependencies": {
    "babel-loader": "^ 8.2.2"."node-sass": "^ the 6.0.1." "}}Copy the code

Note: Style files use SCSS

5. Create an entry file

SRC: indicates the entry file directory

Index. ts: entry file

Index.html: the home page

6. Configure WebPack

Create a new webpack.config.js file

Introduce related modules and plug-ins:

const path = require('path');
const HTMLWebPlugin=require('html-webpack-plugin');
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Copy the code

The configuration is as follows:

module.exports = {
    entry: './src/index.ts'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_[hash:8].js'.// Configure the packaging environment to tell Webpack not to use arrow functions
        environment: {
            arrowFunction: false.const: false}},module: {
        rules: [{test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader'.options: {
                            presets: ['@babel/preset-env']}},'ts-loader'].exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'.'sass-loader',
                    {
                        loader: "postcss-loader".options: {
                            postcssOptions: {
                                plugins: [["postcss-preset-env", {
                                            browsers: 'last 2 versions'}]}}}]}},resolve: {
        extensions: ['.ts'.'.tsx'.'.js']},mode: 'development'.plugins: [
        new HTMLWebPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: '[name]_[hash:8].css'.chunkFilename: '[id].css'
        }),
        new CleanWebpackPlugin()
    ],
    devServer: {
        host: 'localhost'.port: 8085.open: true}}Copy the code

Successfully start project interface:

7, style,

According to the configuration in the webPackconfig. js file, you can directly reference the. SCSS file, and automatically generate a style file when browsing the page, and automatically append the -webkit prefix to parts of the CSS3 feature.

7.1 Use of SCSS style:

Style directory: SRC \ CSS

Index.scs@mixin bg(){background: #efefef; } body{ @include bg(); }

The index.ts file references the index. SCSS file:

import './css/index.scss'

7.2 Use of CSS Styles:

The configuration is basically the same as the SCSS file

{
    test:/\.css$/,
    use:[
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "postcss-loader".options: {
                postcssOptions: {
                    plugins: [["postcss-preset-env", {
                                browsers: 'last 2 versions'}]}}}]}Copy the code

Note: When extracting CSS styles, do not add style-loader to use