如何将标准的webpack配置正确调整为webpack-chain

编程问答 2022-06-12

问题描述

我正在处理将标准webpack配置调整到wepack-chain中，我想将其放入VuePress中的chainWebpack方法中。我的webpack.config.js文件如下所示：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MODE = "development";

module.exports = {
  entry: './docs/scss/index.js',mode: MODE,watch: true,output: {
    path: path.resolve(__dirname,'./docs/.vuepress/public'),},plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',}),],module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,use: [
          MiniCssExtractPlugin.loader,{ loader: 'css-loader',options: { url: false,sourceMap: true } },{ loader: 'sass-loader',options: { sourceMap: true } },]
      },};

我当前的weback-chain版本（无效）如下：

  chainWebpack (config,isServer) {
    if (!isServer) {
      config
        .entry('index')
          .add(path.resolve(process.cwd(),'./docs/.vuepress/index.js'))
          .end()
      config.plugin('css').use(MiniCssExtractPlugin,[{
        filename: '[name].css',chunkFilename: '[id].css',}])
      config.module.rule('css-module')
        .test(/\.(sa|sc|c)ss$/)
        .use('mini-css')
          .loader(MiniCssExtractPlugin.loader)
        .end()
        .oneOf('normal')
        .use('css-loader')
          .loader('css-loader')
          .options({
            url: false,sourceMap: true,})
          .end()
        .oneOf('sass')
        .use('sass-loader')
          .loader('sass-loader')
          .options({
            sourceMap: true,})
          .end()
    }

执行上面的代码后出现错误消息：

(1:1) UnkNown word > 1 | // extracted by mini-css-extract-plugin

Npx vuepress信息给出了输出：

Environment Info:

  System:
    OS: Windows 10 10.0.18363
  Binaries:
    Node: 14.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  browsers:
    Chrome: 85.0.4183.102
    Edge: Not Found
  npmPackages:
    @vuepress/core:  1.5.3
    @vuepress/theme-default:  1.5.3
    vuepress: ^1.5.3 => 1.5.3
  npmGlobalPackages:
    vuepress: Not Found

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue.jsvuepresswebpackwebpackwebpack