webpack-dev-middleware My ts module parsing error after use?

80 views Asked by At

this is error message 1

enter image description here

I don't know why, my package goes to the folder where the current file is located instead of going to node_modules.

this is error message 2

enter image description here

This is my root Folder tree:

.
├── dist
├── gulpfile.js
├── interface
├── node_modules
├── package.json
├── README.md
├── scripts
├── spec
├── __test__
├── yarn.lock
└── yarn-offline

This is my cms2 Folder tree:

.
├── bin
├── config
├── createStore.ts
├── css
├── declarations.d.ts
├── env.ts
├── favicon.ico
├── index.html
├── node_modules
├── package.json
├── redux-form-immutable.d.ts
├── src
├── static
├── tsconfig.json
├── tslint.json
├── utils
├── vendor-manifest.json
└── yarn.lock

This is my webpackConfig File:

'use strict';
const path = require('path');
const os = require('os');
const webpack = require('webpack');
const HtmlWebpacPlugin = require('html-webpack-plugin');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    context: path.resolve(__dirname, '../cms2'),
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, '../../../../dist/interface/www/cms2'),
        publicPath: '/cms2/',
        filename: 'scripts/[name].[contenthash].js',
        chunkFilename: 'scripts/[id].[chunkhash].js',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
                            workers: os.cpus().length - 1,
                        },
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true, // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoader: 2,
                            minimize: true,
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: devMode ? 'images/[name].[ext]' : 'images/[hash].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    // 解析
    resolve: {
        modules: [path.resolve(__dirname, '../cms2/node_modules')],
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    plugins: [
        new CleanWebpackPlugin(['cms2'], {
            root: '/project/dist/interface/www/',
            verbose: true,
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: path.resolve(__dirname, '../../../../dist/interface/www/cms2'),
            },
        ]),
        new HtmlWebpacPlugin({
            template: path.resolve(__dirname, '../index.html'),
            title: 'xxx',
            favicon: '../favicon.ico',
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
            chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('../vendor-manifest.json'),
        }),
        new HtmlWebpackIncludeAssetsPlugin({
            files: ['index.html'],
            assets: ['vendor.dll.js'],
            append: false,
        }),
    ],
};

This is my express File:

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: webPackDevConfig.output.publicPath,
  })
);
0

There are 0 answers