this is error message 1
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
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,
})
);