2019.07.24 13:35

webpack 4 + Vue Loader v15 升级报错

webpack 4 + Vue Loader v15 升级报错

deverror

buiderror

Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。

拿 <style lang="less"> 举例:在 v14 或更低版本中,它会尝试使用 less-loader 加载这个块,并在其后面隐式地链上 css-loader 和 vue-style-loader,这一切都使用内联的 loader 字符串。

在 v15 中,<style lang="less"> 会完成把它当作一个真实的 *.less 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:

{
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

这样做的好处是这条规则同样应用在 JavaScript 里普通的 *.less 导入中,并且你可以为这些 loader 配置任何你想要的选项。在 v14 或更低版本中,如果你想为一个推导出来的 loader 定制选项,你不得不在 Vue Loader 自己的 loaders 选项中将它重复一遍。在 v15 中你再也没有必要这么做了。v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。

但是根据文档来 配置 还是报错 (看上面连个错误截图)所以 我们还是自行动手 webpack那么多坑 踩坑一时爽,一直踩坑一直爽
  • 升级后报错 如下信息
cross-env NODE_ENV=dev webpack-dev-server --mode development --progress --config build/webpack.dev.conf.js

 94% after seal ERROR  Failed to compile with 2 errors10:42:23                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 error  in ./src/components/page/game/article/Comment.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp;

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


exports = module.exports = require("../../../../../node_modules/css-loader/lib/css-base.js")(false);
      ^
Unrecognised input
      in E:\jackieli\my-github\textnuxtapi\src\components\page\game\article\Comment.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp; (line 1, column 8)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/css-loader??ref--8-1!./node_modules/less-loader/dist/cjs.js??ref--8-2!./node_modules/vue-loader/lib??vue-loader-options!./src/components/page/game/article/Comment.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp; 4:14-436 14:3-18:5 15:22-444
 @ ./src/components/page/game/article/Comment.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp;
 @ ./src/components/page/game/article/Comment.vue
 @ ./src/router/index.js
 @ ./src/main.js

 error  in ./src/components/page/game/article/Index.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp;

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


exports = module.exports = require("../../../../../node_modules/css-loader/lib/css-base.js")(false);
      ^
Unrecognised input
      in E:\jackieli\my-github\textnuxtapi\src\components\page\game\article\Index.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp; (line 1, column 8)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/css-loader??ref--8-1!./node_modules/less-loader/dist/cjs.js??ref--8-2!./node_modules/vue-loader/lib??vue-loader-options!./src/components/page/game/article/Index.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp; 4:14-434 14:3-18:5 15:22-442
 @ ./src/components/page/game/article/Index.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp;
 @ ./src/components/page/game/article/Index.vue
 @ ./src/router/index.js
 @ ./src/main.js

分析 报错 原因 是 在 vue组件中 引入了 样式

<style  lang="less" >
 less 文件
</style>

这样的vue组件引入样式 并没有报错

<style>
  @import '~@/css/comp.css'
</style>
分析定位原始应该是loader 处理文件的时候 错误了

解决方法有两种

  • less 文件 用vue-style-loader 处理
  • less 文件用vue-loader 处理
//webpack.base.conf.js
const vueLoaderConfig = require('./vue-loader.conf')
module: {
rules:[
  {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      //way1
     // 推荐使用这个 可用样式覆盖前面的样式 这个是vue-loader的超集 更加智能
      // {
      //   test: /\.less$/,
      //   use: [
      //     'vue-style-loader',
      //     //Module build failed (from ./node_modules/less-loader/dist/cjs.js): 报错 屏蔽下面两个
      //     // 'css-loader',
      //     // 'less-loader'
      //   ]
      // },
      //way2
      {
        test: /\.less$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
       {
        test: /\.scss$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
  ...
]
}

package.json 依赖

// 依赖版本
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^4.37.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.0"

"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --mode development --progress --config build/webpack.dev.conf.js",
    "build": "cross-env NODE_ENV=production node build/build.js"
  },
  • 参考上面的两种解决办法可以自行环境变量设置来使用不同的loader
/*自行解决*/
function fixWebpack4LessLoader(){
   if(process.env.NODE_ENV === 'dev'){
     return   {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          //Module build failed (from ./node_modules/less-loader/dist/cjs.js): 报错 屏蔽下面两个
        ]
       }
   }else{
     return  {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          //Module build failed (from ./node_modules/less-loader/dist/cjs.js): 报错 屏蔽下面两个

          //npm run build 要开启下面两个不然报错 
          'css-loader',
          'less-loader'
        ]
      }
   }
}

// 然后在rules 中 插入这个函数 
  fixWebpack4LessLoader()
  • 你现在可以这样在xxx.vue组件中多种方式使用
<style>
  @import '~@/css/comp.css'
</style>

<style lang="less">
body{
  div{
  border:1px solid red;
  }
}
</style>

还可以这样

<style lang="less">
body{
  div{
   color:red;
}
}
</style>

DIY表情

(添加http或https协议)

提交评论

留言区 8