webpack-dev-middleware我的ts模块使用后解析错误?

时间:2018-11-09 11:49:27

标签: webpack webpack-dev-middleware

这是错误消息1

enter image description here

我不知道为什么,我的包转到当前文件所在的文件夹,而不是node_modules。

这是错误消息2

enter image description here

这是我的根文件夹树:

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

这是我的cms2文件夹树:

.
├── 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

这是我的webpackConfig文件:

'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,
        }),
    ],
};

这是我的快递文件:

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

0 个答案:

没有答案