Question

如果我想分离CSS，则使用该插件会出现错误。

是 mini-css-extract-plugin 还是 extract-text-webpack-plugin

如果CSS不分开，则整个项目没有错误。

我希望有人能帮助我。

错误消息：

./src/components/hello.less中的
ERROR （./node_modules/typings-for-css-modules-loader/lib??ref--5-1!./node_modules/less-loader/dist/cjs.js!./node_modules/mini-css-extract-plugin /dist/loader.js!./node_modules/typings-for-css-modules-loader/lib??ref--7-1!./node_modules/less-loader/dist/cjs.js??ref--7 -2！./ src / components / hello.less）模块构建失败（来自./node_modules/less-loader/dist/cjs.js）：
// extracted by mini-css-extract-plugin
module.exports = {"hello":"_3ZScYPXiBxaLUgURpkNM-X"};
             ^
Unrecognised input
      in C:\Users\Administrator\Desktop\zzm\template\src\components\hello.less
（第2行，第15列） @ ./src/components/hello.less 2：14-339 @ ./src/components/hello.tsx @ ./src/index.tsx

webpack.common.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: "./src/index.tsx"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                loader: "ts-loader"
            },
            // {
            //     test: /\.css$/,
            //     // loader: "css-loader"  
            //     loader: "css-loader"  
            // },
            {
                test: /\.less$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                      loader: 'dts-css-modules-loader',
                      options: {
                        namedExport: true,
                      }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            // 是否用css module
                            modules: true,
                            // 支持驼峰
                            camelCase: true
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit:8192,//限制打包图片的大小：
                    //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
                    name:'/assets/img/[name]-[hash:8].[ext]',//img:图片打包的文件夹；
                    //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
                    //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html'
        }),
        // 无视.d.ts
        new webpack.WatchIgnorePlugin([
          /less\.d\.ts$/
        ]),
    ]
}

webpack.pro.config

const path = require('path');
const webpack = require('webpack');
const config = require('./webpack.common.config');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 分离css
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清空文件夹
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // bundle可视化工具
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css

module.exports = merge(config, {
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "redux": "Redux"
    },
    output: {
        filename: "bundle.[chunkhash].js"
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /(\.less)$/,
                exclude: /node_modules/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'dts-css-modules-loader',
                        options: {
                            namedExport: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            // 是否用css module
                            modules: true,
                            // 支持驼峰
                            camelCase: true
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            javascriptEnabled: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
                root: path.resolve(__dirname, 'dist'),
                exclude: ['assets'],
                dry: false // 启用删除文件
        }),
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: "[name].[hash]css",
          chunkFilename: "[id].[hash].css"
        }),
        new HtmlWebpackPlugin({
            inject: 'body',
            template: __dirname + '/public/index.html',
            filename: "index.html",
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
        }),
        // bundle 可视化工具
        new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerHost: '127.0.0.1',
            analyzerPort: 8889,
            reportFilename: 'report.html',
            defaultSizes: 'parsed',
            openAnalyzer: true,
            generateStatsFile: false,
            statsFilename: 'stats.json',
            statsOptions: null,
            logLevel: 'info'
        }),
    ],
    // 提取公共模块
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        },
    }
})

TS + React + Less：MiniCssExtractPlugin构建错误

0 个答案: